Как вставить разрыв строки в ::before элемента с помощью CSS и attr()
Мой вопрос похож на этот при переполнении стека. Но есть разница. Я хочу иметь разрыв строки в функции «attr()» в «содержимом» псевдоэлемента «::before». Мой код выглядит примерно так:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
<style>
div > a {
white-space: pre-wrap;
}
div > a::before {
display: block;
content: attr(title);
}
</style>
</head>
<body>
<div><a href = "#" title = "Facebook Ads \A Performance Grader Get ready to improve your reach …">actual link</a></div>
</body>
</html>Мне нужен разрыв строки в моем тексте в атрибуте «title» тега «a». Итак, согласно этому вопросу, я использовал \A в своем атрибуте «заголовок». Но это не работает! В этом сценарии разрыва строки не происходит. Я хочу знать, почему? и как я могу использовать «разрыв строки» (создание новой строки) в своем тексте, когда я использую функцию «attr()» в CSS? Если я просто использую реальный текст в своем свойстве «content» в CSS, как в приведенном ниже коде:
div > a::before {
display: block;
content: "Facebook Ads \A Performance Grader Get ready to improve your reach …";
}
Он работает нормально. Но при использовании «attr()» он не работает!
Ответы 1
Внутри HTML вам нужно использовать объект HTML (или аналогичный).
div > a {
white-space: pre-wrap;
}
div > a::before {
display: block;
content: attr(title);
}<div><a href = "#" title = "Facebook Ads Performance Grader Get ready to improve your reach …">actual link</a></div>@hamid-davodi добавьте pointer-events: none;float: left;width: 100%; к псевдоэлементу (но это очень хакерски и не рекомендуется)
Вы также можете использовать альтернативное написание 
.
@zer00ne, большое спасибо. Это тоже работает для меня.
Афииф Большое спасибо. Есть ли способ удалить связанный текст из ::before? Я имею в виду, что связана только «фактическая ссылка», а не «Facebook…».