高度和宽度不适用于 CSS 内容属性

Question

我正在尝试为 CSS content: "" 属性提供高度和宽度（画一条线），但它不起作用。这可以应用高度和宽度吗？或使用 content: "" 属性?

实现它的任何其他解决方法

div:after {
    content: '[=12=]af';
    width: 500px;
    height: 100px;
    display: block;
}

我正在努力实现；内容前后的一行横跨整个宽度。

________like this_______

Answer 1

您需要改用 font-size。

div:after {
  content: '[=10=]af';
  font-size: 50px;
  display: block;
}

<div></div>

Answer 2

您的 "Content" 标记呈现了一条线，是吗？好吧，那里发生的事情是你的 div 是根据要求变成 500px 宽，但它没有显示，因为你的 CSS 正在渲染本质上是一个角色，那不受宽度和高度属性的影响。

如果你想改变这条线的外观，你必须把它当作一个字符来对待。因此，请使用 font-size 或 font-weight 而不是高度和宽度。

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

实现所需效果的一种可能方法是添加一个带有 border-bottom 的伪元素（在本例中为 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>

高度和宽度不适用于 CSS 内容属性

Height and width not working on CSS Content property

html

css

css-shapes

高度和宽度不适用于 CSS 内容 属性

Height and width not working on CSS Content property

html

css

css-shapes

高度和宽度不适用于 CSS 内容属性