应用错误收集

我遇到了一个问题，试图仅使用CSS来解决它。

这是我的html

<body>
    <p>empty</p>
    <p><img src="/"></p>
    <p><img src="/"></p>
    <p>empty</p>
</body>

还有我的CSS

body {
    counter-reset: my-sec-counter;
}
p {
    position: relative;
}
p:after {
    position: absolute;
    font-size: 17px;
    top: -15px;
    right: -15px;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100px;
    transition: .1s;
    counter-increment: my-sec-counter;
    content: "#" counter(my-sec-counter);
    color: #fff;
    border: 3px solid white;
    background-color: black;
    font-weight: bold;
}

但是，我只想在after包含p的情况下显示img元素。我尝试了img ~ p:after，但没有用。

有帮助吗？

仅将包含<img>的<p>添加一个：after

0 个答案: