Проверка атрибута заголовка CSS, если он не пуст, и добавление содержимого

моя цель: проверить, не пуст ли атрибут title; если это не так, то должно быть добавлено значение этого атрибута title плюс дефис. С другой стороны, если атрибут title пуст, то " - " не следует добавлять вообще.

вот мой текущий код CSS:

div:hover::before{content:attr(title):not(attr(title)="") " - ";}

но это работает не так, как ожидалось.

например:

<div title="My username">some text</div>

при наведении курсора должно отображаться следующее:

мой логин - какой-то текст

но если:

<div title="">some text</div>

или (без названия на div):

<div>some text</div>

тогда дисплей при наведении должен быть:

текст

можно ли это исправить?

6
css css-selectors css3

1 ответов

вы можете использовать селекторы атрибутов в сочетании с attr() функция для выполнения этого. The attr() функция просто захватывает значение данного атрибута - она не поддерживает никаких условных операторов.

обратите внимание, что я использую [title=""] и :not([title]) для учета как пустых атрибутов заголовка, так и отсутствия атрибута заголовка в целом. Вы можете опустить :not() часть, в том числе [title] в вашем первом правиле вместо этого, но это не работает в Интернете E-извините, я имел в виду, что это не работает в Chrome.

div:hover::before {
    content: attr(title) " - ";
}

div[title=""]:hover::before, div:not([title]):hover::before {
    content: none;
}
<div title="My username">some text</div>
<div title="">some text</div>
<div>some text</div>
6