Как вставить разрыв строки в ::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()» он не работает!

🤔 А знаете ли вы, что...
HTML5 предоставляет более широкие возможности для работы с мультимедиа, включая аудио и видео без использования плагинов.


2
63
1

Ответ:

Решено

Внутри HTML вам нужно использовать объект HTML &#10; (или аналогичный).

div > a {
  white-space: pre-wrap;
}

div > a::before {
  display: block;
  content: attr(title);
}
<div><a href = "#" title = "Facebook Ads &#10; Performance Grader Get  ready to improve your reach …">actual link</a></div>