Я хочу добавить круг уведомлений к одному пункту меню на моем WP-сайте.
Стилизация выполняется в css, и теперь он должен быть помещен в тег <span>
, который не существует.
<span>
должен быть помещен после тега <a>
, чтобы он работал.
Мой подход заключается в использовании :: after, но я не могу заставить код работать.
Что я делаю не так?
Я пробовал много вариантов, но безуспешно.
Это не работает:
a::after {
content: "<span class="notifier">3</span>";
}
.notifier {
position: absolute;
top: 1.25rem;
right: -0.5rem;
background: #ea3326;
width: 1.25rem;
height: 1.25rem;
text-align: center;
line-height: 1.225rem;
color: #ffffff;
font-weight: bold;
border-radius: 100%;
z-index: 97;
font-size: 0.8rem;
cursor: pointer;
}
Следующее также не работает. Однако он показывает код <span class="notifier">3</span>
на передней панели, но не стиль.
a::after {
content: "<span class=\"notifier\">3</span>";
}
.notifier {
position: absolute;
top: 1.25rem;
right: -0.5rem;
background: #ea3326;
width: 1.25rem;
height: 1.25rem;
text-align: center;
line-height: 1.225rem;
color: #ffffff;
font-weight: bold;
border-radius: 100%;
z-index: 97;
font-size: 0.8rem;
cursor: pointer;
}
Я ожидаю красный круг с белым 3 рядом с кнопкой.