css Question posted in
Some basic documentation can be found here.

Css – Relative positioned <span> inside a <p> element

I need a span to be displayed as a marker BENEATH important texts on my page.

It should have been positioned at the bottom of the p element – but it does not.

Can someone tell me what’s wrong in the code?

.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>
Tags:

2

Answers


  1. 0

    Quote in comments: "What is it that you actually try to do? Do you want to mark that by underlining it?
    Respond of OP: "Yes, exactly"

    XY problem here. Instead of using a pseudo-element and positioning it, Simply add the underline as border-bottom to element itself:

    .marker {
  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>

    Another method and actually the better one would be the usage of text-decoration: underline:

    .marker {
  text-decoration: underline;
  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>
    Login or Signup to reply.
  2. 0

    There are some things to consider with this approach and using text-decoration or even border-bottom can be an easier way to get the style you currently have. An obvious problem is that it will not work properly if the text is long enough that it wraps lines.

    If you’re just doing a plain straight line under the text, removing the marker element and just using the container with border-bottom is an easier way to get this style and provides a bit more customization than does text-decoration.

    The benefit to this approach is that it allows for the most customization. For example, you could use an SVG to get a hand-drawn look for the underline.

    Basically there are three approaches to underlining text:

    • Use text-decoration: most simple, least control of style
    • Use border-bottom on the container of the text: slightly more complex, slightly more control on style
    • Use position: absolute on the marker element: most complex, full control over style, won’t work with wrapping text

    If you choose to go with this approach here is what you’ll need to change:

    You’ll need to give the wrapper a position of relative so that the marker element is positioned absolutely relative to the parent.

    The next reason why you’re not seeing the element is because it has no width, this can be fixed by adding width: 100%. Finally, you’ll notice the marker shows up after the text, this can easily be fixed with 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search