Относительное расположение <span> внутри элемента <p>
Мне нужен диапазон, который будет отображаться как маркер ПОД важным текстом на моей странице.
Его следовало бы расположить внизу элемента p, но это не так.
Может кто-нибудь сказать мне, что не так в коде?
.marker {
position: absolute;
bottom: 0px;
background-color: red;
height: 3.9px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "a.css">
</head>
<body>
<div>
<p>
This is
<span>IMPORTANT INFORMATION THAT NEEDS TO BE EMPHASIZED
<span class = "marker"></span>
</span>
</p>
</div>
</body>
</html>position: absolute не имеет смысла в тексте из соображений доступности. Что вы на самом деле пытаетесь сделать? Хотите отметить это, подчеркнув?
Эй, кажется, это не работает! Пробовал это на обоих пролетах @HenryWoody
Да, именно @tacoshy
вы должны принять во внимание, что <p> - это элемент уровня блока... поэтому он будет занимать всю ширину... и элемент с абсолютным позиционированием будет "помещен" в конец строки (будучи bottom: 0 .. (но вы этого не сделали) указано right/left). Но я думаю, что это не лучший подход для того, чего вы пытаетесь достичь. Чтобы лучше визуализировать то, что вы делаете, используйте границы для своих элементов. Плюс учтите, что <span> — это встроенный элемент.. и выиграл. не имеет своего размера.. а просто фразовое содержание (которое вы не использовали)
Привет, я попробовал «left: 0px» - тоже не сработало @DiegoD
Относительная позиция на контейнере, абсолютная позиция на маркере, а также вам нужны left: 0 и width: 100% на маркере.
@DiegoD - Почему вы добавили в фрагмент дополнительный CSS - изначально это не было опубликовано
Он работает отлично!! Большое спасибо!! @ГенриВуди
@DarkBee, потому что ОП было трудно понять основы темы, рассмотренной миллионы раз, и это ничего не изменит для SO с вопросом, который касается не общих знаний, а просто конкретной проблемы. В любом случае, конечно, я знаю правила. Я их нарушил. меня простят, я надеюсь
Ответы 2
Цитата в комментариях: «Что вы на самом деле пытаетесь сделать? Хотите отметить это, подчеркнув это?
Ответ ОП: «Да, именно»
ОП Комментарий под другим ответом: «Мне нужно, чтобы маркер был невидимым через непрозрачность: 0; а затем появлялся при наведении курсора...»
Проблема XY здесь. Вместо того, чтобы использовать псевдоэлемент и позиционировать его, просто добавьте подчеркивание как border-bottom к самому элементу.
Чтобы оно отображалось только при наведении курсора, вы можете использовать селектор :hover:
.marker:hover {
border-bottom: 3.9px solid red;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "a.css">
</head>
<body>
<div>
<p>
This is
<span class = "marker">IMPORTANT INFORMATION THAT NEEDS TO BE EMPHASIZED</span>
</p>
</div>
</body>
</html>Другой метод, и на самом деле лучший, — это использование text-decoration: underline:
.marker:hover {
text-decoration: underline;
text-underline-offset: 0;
text-decoration-color: red;
text-decoration-thickness: 3.9px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "a.css">
</head>
<body>
<div>
<p>
This is
<span class = "marker">IMPORTANT INFORMATION THAT NEEDS TO BE EMPHASIZED</span>
</p>
</div>
</body>
</html>Это похоже на очень хорошее предложение!! Вам тоже большое спасибо!!
Выглядит хорошо! Но знаете, почему строка выбивается из текста? Большое спасибо!
из-за того, как рассчитывается высота строки, что создает небольшой пробел, чтобы сделать текст более читабельным.
Можно ли это отменить?
Да с text-underline-offset: 0;
При таком подходе следует учитывать некоторые моменты, и использование text-decoration или даже border-bottom может оказаться более простым способом добиться того стиля, который у вас есть сейчас. Очевидная проблема заключается в том, что он не будет работать должным образом, если текст достаточно длинный, чтобы переносить строки.
Если вы просто рисуете простую прямую линию под текстом, удалите элемент marker и просто используйте контейнер с border-bottom — это более простой способ получить этот стиль и обеспечивает немного больше настроек, чем text-decoration.
Преимущество этого подхода в том, что он допускает максимальную настройку. Например, вы можете использовать SVG, чтобы подчеркнуть нарисованный от руки вид.
В основном существует три подхода к подчеркиванию текста:
- Используйте
text-decoration: самое простое, минимум контроля над стилем. - Используйте
border-bottomв контейнере текста: немного сложнее, немного больше контроля над стилем. - Используйте
position: absoluteна элементе-маркере: самый сложный, полный контроль над стилем, не работает с переносом текста.
Если вы решите использовать этот подход, вот что вам нужно изменить:
Вам нужно будет присвоить обертке позицию relative, чтобы элемент-маркер располагался абсолютно относительно родительского элемента.
Следующая причина, по которой вы не видите элемент, заключается в том, что у него нет ширины. Это можно исправить, добавив width: 100%. Наконец, вы заметите, что после текста появляется маркер. Это можно легко исправить с помощью left: 0px.
.marker-wrapper {
position: relative;
}
.marker {
position: absolute;
bottom: 0px;
left: 0px;
background-color: red;
height: 3.9px;
width: 100%;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "a.css">
</head>
<body>
<div>
<p>
This is
<span class = "marker-wrapper">IMPORTANT INFORMATION THAT NEEDS TO BE EMPHASIZED
<span class = "marker"></span>
</span>
</p>
</div>
</body>
</html>Это прекрасно работает до тех пор, пока текст не перейдет на следующую строку, и в этот момент мы сталкиваемся с проблемой такого рода подчеркивания, сделанного своими руками.
В частности, для эффекта, который мне нужен, это единственный правильный путь - мне нужно, чтобы маркер был невидимым через «непрозрачность: 0»; а затем при наведении курсора появляется вместе с другим маркером, чтобы он отражал его (на моей странице) - чего можно достичь только с помощью вашего ответа, так что еще раз спасибо!
вместо того, чтобы давать неполные требования, вам следует опубликовать их все сразу. Конечно, вы можете сделать подчеркивание невидимым и показывать его только при наведении курсора, просто используя селектор :hover.
Вам нужен контейнер (диапазон, который обертывает диапазон
marker), чтобы иметьposition: relative.