Question

创建整理后的帖子的时间表。对于每个H2标题，我想使用负边距添加一个圆圈，该圆圈将位于父div的边界上。

但是，当我这样做时，它也会导致文本也向左移动（可以理解）。

有什么建议吗？

class MyProperty(BoundedNumericProperty):
    def __init__(self, *largs, **kw):
        self._my_min = kw.get('min', 0)  # 0 is default
        self._my_max = kw.get('max', 1)  # 1 is default
        kw['min'] = self._my_min
        kw['max'] = self._my_max
        kw['errorhandler'] = self._my_errorhandler
        super().__init__(*largs, **kw)

    def _my_errorhandler(self, x):
        return min(max(x, self._my_min), self._my_max)

CSS

   <!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="fl-post-text">
<div class="one-sixth first">
  <span> Date goes here</span> 
    </div>
    <div class="five-sixths">
    <div class="fl-post-title"> Post Title</div>
    <h2>Sub Heading</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut bibendum mi, nec dapibus nisi. Aliquam rhoncus neque nec tortor pretium varius. Aenean ornare tempor varius. Aliquam erat volutpat. Aliquam tincidunt mattis nisi a consequat. Nullam vitae arcu lectus. Suspendisse pharetra dignissim orci, ac luctus velit mattis in.

</p>

<strong>Time of update</strong>
<div class="point">
<h2>update heading</h2>
</div>
<div class="textarea"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut bibendum mi, nec dapibus nisi. Aliquam rhoncus neque nec tortor pretium varius. Aenean ornare tempor varius. Aliquam erat volutpat. Aliquam tincidunt mattis nisi a consequat. Nullam vitae arcu lectus. Suspendisse pharetra dignissim orci, ac luctus velit mattis in.

</p></div>
<div class="spacer"></div>

</div>
</div>
<div class="clearfix"></div
</body>
</html>

JS小提琴链接https://jsfiddle.net/hy6k8u0q/

Answer 1

.point ::before {
    margin-right: 15px;
}

只需在规则中添加边距权利，它就可以按照您想要的方式工作。

Answer 2

将:before伪元素更改为绝对位置，并删除左位置为负的左侧负边距，相对于父元素<h2 />添加位置。例子

.fl-post-text h2 {
    font-size: 18px;
    position: relative;
}
.point ::before{
   content: '';
   display: inline-block;
   position: absolute;
   left:-28px;
   width: 15px;
   height: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius:15px;
   border-radius:15px;
   background-color: grey;
}

选择器前使用CSS时的填充

2 个答案: