Question

我想将 :: before 伪元素的宽度设置为80％。如果我使用定位，则一切正常，但是如果我不使用定位，则一切都会失败。

您能解释一下为什么没有定位时百分比宽度不起作用吗？如果可以的话，请添加一些对规范的引用

<!DOCTYPE html>
<html>
<head>
</head>
	<body>
	<div style="color: #FFFFFF; padding:30px;">
		<div style="border-radius: 25px; background-image: url(https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80); background-size: cover; background-repeat: no-repeat; background-position: center center; height: 400px; color: #ACA394; text-shadow: 1px 1px #000000; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; width: 100%">
				<div style="width: 100%; text-align: center; background-color: rgb(0,0,0,0.5);">
					<h1><b>Title</b> Subtitle</h1>
					<h2>Some text</h2>
				</div>
		</div>
	</div>
	</body>
</html>

.positioned {
    position: relative;
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.positioned::before {
    position: absolute;
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

.not-positioned {
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.not-positioned::before {
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

Answer 1

首先，它与百分比值无关。即使使用像素值，宽度和高度都不起作用，您将获得相同的结果。

伪元素是 inline 元素，其宽度/高度仅由其内容定义，而CSS设置的宽度/高度将被忽略。

在CSS中，::before创建一个伪元素，该元素是所选元素的第一个子元素。它通常用于将化妆品内容添加到具有content属性的元素。 默认情况下为内联。 ^ref

宽度

此属性不适用于未替换的内联元素。未替换的内联元素框的内容宽度是其中内嵌内容的宽度 ^ref

“ height”属性不适用。内容区域的高度应基于字体... ^ref

现在通过制作伪元素position:absolute，您将考虑适用于Absolutely positioned element的规则，以便计算宽度和高度。您还将注意到该元素在显示中的计算值为block。

您还应该注意 positioned元素的使用，这意味着相对，绝对，固定或粘性BUT都会使元素position:relative保持内联级别，而您仍然不能使用宽度/高度。

.positioned {
    position: relative;
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.positioned::before {
    position: relative;
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

.not-positioned {
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.not-positioned::before {
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

<div class="positioned"></div>
<div class="not-positioned"></div>

这就是说，如果您想获得相同的视觉效果，则可以通过考虑渐变来简化代码：

.positioned {
  position: relative;
  height: 15px;
  background:
   linear-gradient(red,red) left/80% 100% no-repeat,
   aquamarine;
  margin-bottom: 10px;
}

<div class="positioned"></div>

为什么宽度不适用于未定位的伪元素？

1 个答案: