0

I'm facing a issue, and trying to solve it using only CSS.

Here is my html

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

And my 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;
}

But I'd like to display an after element only if p contains an img. I tried img ~ p:after but doesn't work.

Any help?

Artik
  • 85
  • 1
  • 3
  • 9
  • Try p img:after {} – Keith Aug 27 '19 at 13:42
  • Yes, it's what I started from, but after elements don't work with img tags – Artik Aug 27 '19 at 13:43
  • @Keith – That will select the `::after` pseudo-element of the image which (a) isn't what is asked for and (b) won't do anything because images are replaced elements and can't have `::after` content. – Quentin Aug 27 '19 at 13:43
  • @Quentin Not sure what you're talking about, can have pseudo elements added to it https://jsfiddle.net/Lbqfe20h/ . As for what he's asking, if there is an tag after

    then p img:after will certainly work

     – Keith Aug 27 '19 at 13:49
  • you can use jQuery as well. Pseudo doesn't work on img element $('img[src=""]').parents().addClass('pseudoSelector'); – Varsha Dhadge Aug 27 '19 at 13:51
  • @Artik if the other `p` tags are really empty you code just use `p:not(:empty):after {` but I assume that is not the case? – Sam Aug 27 '19 at 18:05
  • @circa1983 Unfotunately it's not empty, but it's only text content. I'l try anyway – Artik Aug 30 '19 at 12:49

0 Answers0