Question

我正在尝试为CSS content: ""属性提供高度和宽度（绘制一条线），但它不起作用。这可能适用于它的高度和宽度吗？或者使用content: ""属性来实现它的任何其他工作？

div:after {
    content: '\00af';
    width: 500px;
    height: 100px;
    display: block;
}

我想要实现;内容跨越整个宽度之前和之后的一行。

________like this_______

Answer 1

实现所需效果的一种可能方法是在div:after处添加伪元素（在本例中为border-bottom），然后定位伪元素和包含span的元素文本以span的边框（白色或与背景颜色相同）与伪元素的边框重叠的方式。 span文本是居中对齐的，以便产生前后有一条线的效果，而实际上该线是完整的div，但只是文本下的部分被隐藏

注意：我没有回答原来的问题，因为Tim和chipChocolate.py的答案已经涵盖了这个问题。实质上，当您使用内容标记创建行时，您需要将该行视为文本并使用font-*属性来增加其大小。

＆＃13;

div {
  position: relative;
  text-align: center;
  width: 200px;
  margin-bottom: 10px; /* just for demo */
}
.small{
  font-size: 0.75em;
}
span {
  display: inline-block;
  padding: 0px 2px; /* the more the padding the more the space between text and line */
  border-bottom: 2px solid white;
}
div:after {
  border-bottom: 2px solid black;
  width: 100%;
  position: absolute;
  content: '';
  height: 100%;
  left: 0px;
  top: -2px;
  z-index: -1;
}

＆＃13;

<div>
  <span>Text</span>
</div>

<div>
  <span>Lengthy Text</span>
</div>

<div>
  <span>Very Lengthy Text</span>
</div>

<div class="small">
  <span>Smaller Font</span>
</div>

＆＃13;

Answer 2

您需要改为使用font-size。

＆＃13;

div:after {
  content: '\00af';
  font-size: 50px;
  display: block;
}

＆＃13;

<div></div>

＆＃13;

Answer 3

div:after {
    content: '';
    background:black;
    width: 500px;
    height: 1px;
    font-size:50px;
    display: block;
}

content: '';将内容放在div之后。将其设置为空。

现在我们可以使用div:after生成的框作为条形本身，而不是使用文本字符。

现在设置background: black;以使条形图变黑。

然后将height和width调整为您想要的酒吧的高度和宽度。

Answer 4

您的“内容”标记会显示一行，是吗？那么，正在发生的事情是你的div 根据要求变宽了500px，但它没有显示，因为你的CSS渲染的本质上是一个字符，不受宽度和高度属性的影响。 / p>

如果你想改变这一行的外观，你必须将它视为一个角色。因此，请使用 font-size 或 font-weight 而不是高度和宽度。

高度和宽度不适用于CSS Content属性

4 个答案: