Question 396207 in CSS Question posted in
Some basic documentation can be found here.

How to insert a line break in ::before of an element using CSS and attr()

My question is similar to this one in stack overflow. But there is a difference. I want to have line break in "attr()" function in "content" of "::before" pseudo element. My code is something like this:

<!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>

I want a line break in my text in the "title" attribute of "a" tag. So according to that question I used A in my "title" attribute. But that is not working! No line break is happening in this scenario. I want to know that why? and how could I have "line break" (making new line) in my text when I am using "attr()" function in CSS? If I just use the real text in my "content" property in CSS like the code below:

div > a::before {
            display: block;
            
            content: "Facebook Ads A Performance Grader Get  ready to improve your reach …";
        }

It works fine. But when using "attr()", it is not working!

Tags:

2

Answers


  1. 0

    Inside the HTML you need to use the HTML entity &#10; (or similar)

    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>
    Login or Signup to reply.
  2. 0 
    <!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;
            /* Using data attribute for line breaks */
            content: attr(data-title);
            white-space: pre-wrap; /* Preserve line breaks */
        }
    </style>
</head>
<body>
<div><a href="#" data-title="Facebook Ads
Performance Grader
Get ready to improve your reach …">actual link</a></div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search