Добавляйте контент в элемент с помощью CSS, кроме случаев, когда это изображение

Question

Я использую плагин WordPress, который добавляет партнерские ссылки.У него есть имя класса 'thirstylink'.

Поскольку я хочу, чтобы партнерские ссылки были выделены, я добавил следующий CSS-код для добавления звездочки после каждой партнерской ссылки:

.thirstylink:after {
    content: "*";
}

Thisссылки на стили, как это, со звездочкой в ​​конце:

<a href="#test" class="thirstylink">this is an affiliate link</a>

Однако я не хочу, чтобы связанные изображения были стилизованы так.Например ...

<a href="#test" class="thirstylink"><img src="#imageofproduct"></a>

Можно ли добавить звездочку к связанному тексту с классом thirstylink, но не к связанному изображению?Можно ли это сделать с помощью CSS или мне придется прибегнуть к Javascript?

Спасибо!

Answer 1

это невозможно в CSS сейчас.но вы можете использовать jquery.

Решение 1:

$(document).ready(function(){
    $(".thirstylink:not(:has(img))").addClass('thirstylink-without-img');
});

и CSS

.thirstylink-without-img:after {
    content: "*";
}

Решение 2:

Это решение на будущее.это не работает сейчас.но вы можете использовать это в будущем

.thirstylink:not(:has(> img)):after {
  content: "*";
} 

Здесь мы используем CSS : имеет псевдоселектор