Задайте последний элемент A с условными обозначениями

Question

Мне нужно направить последний элемент <a>, но с некоторыми условными обозначениями. В этом случае текст создается через CMS, который ограничивает меня возможностью добавления класса. Я создал jsfiddle, чтобы показать свою проблему. В последнем <a> должен быть шрифт, который является удивительным углом в его :after другом <a> элементов нет. Я не могу использовать что-то вроде :last-child a, потому что пользователю/текстовому автору не нужно писать ссылку по умолчанию. Существует также возможность другого абзаца после первого. Поэтому ничто не является дефолтом, но последний элемент <a>, который стоит отдельно от абзаца с каким-то фактическим текстом, должен иметь значок.

Это нелегко объяснить, но jsfiddle объяснит это, поэтому, пожалуйста, взгляните. было бы неплохо, если бы было решение CSS. если не jQuery на втором месте.

Заранее благодарен!

Answer 1

Насколько я знаю, это невозможно с помощью только CSS.

Как насчет JavaScript:

var element = document.getElementsByTagName("a"); 
for(var i=0; i < element.length; i++) { 
    var el = element[i] 
    var x = el.parentNode.innerText.length; 
    var y = el.innerText.length 
    if (x === y) { 
     el.classList.add('icon'); 
    } 
} 

CSS:

.icon::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
} 

Он добавляет .icon класс для всех <a> элементов, которые не обернутых рядный с текстом в родительском элементе.

Answer 2

Вы можете настроить таргетинг на последний тег p.

p:last-of-type a::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
}