【发布时间】：2017-02-26 11:38:38
【问题描述】：
我注意到，当我检查使用引导类编写的代码时，CSS 中往往有很多 ::after 和 ::before 属性。下面是一个示例（来自 w3schools 网站）。
有人可以概括地解释一下这些额外属性的设计目的是什么，以及为什么它们似乎出现在几乎所有元素上？
据我所知，他们正在将所有被排除的元素变成表格元素并添加一个空白的文本空间。我假设这是出于布局目的，但我很想了解更多关于这样做的原因。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
据我所知，我认为 Bootstrap 使用伪元素作为
clearfix。请参阅此链接stackoverflow.com/questions/211383/…。看看有没有帮助。 -
我不确定这个问题是如何与建议的问题重复的。也许作为一个可能提供更多洞察力的相关问题，一旦读者知道 Bootstrap 中的伪元素与 clearfix 有关，另一个答案很有用。
标签： html css twitter-bootstrap pseudo-element