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

Question

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

摆弄问题

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

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

________like this_______

Answer 1

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

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

 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; } 

 <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> 

Answer 2

您需要使用font-size 。

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

 <div></div> 

Answer 3

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

---

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

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

---

现在设置background: black; 使酒吧变黑。

然后将您的height和width调整到您想要的酒吧的height和width 。

Answer 4

您的“内容”标记会显示一行，是吗？ 那么，发生了什么有你的DIV 宽成为500像素的要求，但它没有显示，因为你的CSS正在呈现什么本质上是一个字符，也就是不受width和height属性。

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