html - 使用伪类进行高级布局

所以问题是...

好的CSS规则：
我们必须为position: absolute设置顶部/右侧或底部/右侧或顶部/左侧或底部/左侧。
而不是保证金...

但是我们是否必须为css ::after或::before设置thouse位置？

伪类总是在元素之后或之前。

如果，那么..如何达到预期的输出：

$(function(){
$('span').on('click',function(){
$(this).parent().append(' extra text ');
})
})

.test__block{
    width:200px;
    margin:20px;
    border:2px solid;
    position:relative;
}

#blue{
    border-color:blue;}

#red{
    border-color:red}

span{
    cursor:pointer;
    font-weight:800}

#blue:after {
      content: "+";
      font-size:16px;
      position: absolute;
      margin-left: 0;
      margin-top: -4px;
      color:orange;
}

#red:after {
      content: "+";
      font-size:16px;
      position: absolute;
      left: 80px;
      top: 30px;
      color:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='blue' class='test__block'>Blue text with after element, position set to absolute and top/left, <span>add</span></div>
<div id='red' class='test__block'>Red text with after element, position set to absolute and margin, <span>add</span></div>

因此，如果您按添加按钮，您将看到'+'对组件的反应。

预期效果是一个蓝色的容器。

那么正确的方法是什么呢？这只是一个例子。关键是我不会添加文本，但是文本在每个组件上都有不同的尺寸，因此每次在after元素上添加不同的位置将毫无意义吗？也许有一天内容会改变，我每次都必须设置thouse吗？
如果我必须将thouse设置为100，该怎么办？或1000个零件？

有任何线索吗？

最佳答案

::after是一个伪元素，它允许您将内容从CSS插入到页面上（不需要在HTML中）。虽然最终结果实际上不在DOM中，但它似乎在页面中显示。

::before完全相同，只是它在HTML中的其他任何内容之前而不是之后插入内容。唯一使用一个的理由是：


您希望生成的内容位于元素内容之前，
位置上。
::after内容也按源顺序位于“之后”，因此它将
如果自然堆叠，则位于::before顶部。


您关心的另一件事是它的位置。尝试将$(this).parent().append(' extra text ');设置为$(this).parent().append(' extra text extra text extra text extra text extra text');。 +将保持在相同位置（根据蓝色显示），如果您单击add，它仍将是文本的结尾。因为将margin-left和margin-top值设置为蓝色时，是在+上设置span的位置。

因此，当您将文本添加到该span元素并单击add时，文本将展开，并且+总是以给定位置出现::AFTER文本，无论如何。因为是伪类。您在::after上设置的垂直和水平位置是元素之后的位置。


  绝对定位的元素是其计算的位置值为absolute或fixed的元素。 top，right，bottom和left属性指定距元素包含块的边缘的偏移量。 （包含块是元素相对于其放置的祖先。）如果元素具有边距，则将它们添加到偏移量中。


希望能帮助到你 ：）

关于html - 使用伪类进行高级布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58358091/