DIV 中的文本未显示 [英] Text in the DIV not showing

问题描述

我需要使用这个形状，并在里面显示一个文本.但是，我不知道为什么文本不显示.

HTML:

<h3>Shihab Mridha </h3>

CSS:

#thebag{位置:相对；溢出:隐藏；}#thebag::before{内容: '';位置:绝对；顶部:0；左:0；高度:50px；宽度:30%；背景:红色；}#thebag::after {内容: '';位置:绝对；顶部:0；左:30%；宽度:0；高度:0；边框底部:50px 纯红色；border-right: 70px 实心透明；}

https://jsfiddle.net/kn87syvb/1/

解决方案

你需要添加position:relative(或者position:inherit，因为它和parent) 到您的 #thebag h3 类.目前，您的 CSS 样式仅影响 h3 的父级 - 为了让 h3 与文本一起显示，您需要为其定义 CSS 样式.

https://jsfiddle.net/kn87syvb/2/

I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.

HTML:

<div id="thebag">
  <h3> Shihab Mridha </h3>
</div>

CSS:

#thebag{
  position: relative;
  overflow: hidden;
}
#thebag::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 30%;
  background: red;
}
#thebag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  width: 0;
  height: 0;
  border-bottom: 50px solid red;
  border-right: 70px solid transparent;
}

https://jsfiddle.net/kn87syvb/1/

解决方案

You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.

https://jsfiddle.net/kn87syvb/2/

这篇关于DIV 中的文本未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！