Мне было интересно, можно ли поместить z-индекс элемента after-pseudo, чтобы он находился за текстом ссылки. Например;Позиционирование: after-pseudo позади текста по ссылке
HTML
<a href="#">Here's a link</a>
SCSS
a {
background: #666:
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
&:before {
/* this is occupied */
}
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0; left: 0;
background: #000;
}
}
То, что я пытаюсь достичь здесь, чтобы отобразить текст ссылки. В настоящее время этого не происходит, потому что элемент :after
перекрывает его. Я хотел бы поместить текст на передний план, не используя что-то вроде тега <span>
. Примечание: он должен перекрывать исходный фон, но не текст.
Есть ли способ достичь этого, или это просто невозможно?
Каждый элемент, который вы хотите изменить z-index, должен иметь атрибут position, в основном «position: absolute». И затем переместите его, вы можете попробовать это. –
Вы пробовали z-index? –
и почему вы не используете фон для контента? можете ли вы объяснить, почему вы так поступаете? –