CSS dot leaders at first line over complex background

Question

I need to implement dot leaders after first line of text using CSS to use it over texture/image background.

Expected behaviour:

I saw a few implementation of dot leaders over the internet. They all use one of the techniques below:

::after dots + overflow

.item1 {
  display: flex;
}
.text1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.text1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted grey;
  width: 100%;
}
.price1 {
  align-self: flex-end;
}

absolute dots + white background

.item2 {
  display: flex;
  justify-content: space-between;
  position: relative;
  mix-blend-mode: darken;
}
.item2::before {
  content: '';
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  border-bottom: 1px grey dotted;
}
.bg2 {
  background: white;
  position: relative;
  z-index: 1;
}

dumb flexbox

.item3 {
  display: flex;
  align-items: flex-start;
}
.dots3 {
  flex-grow: 1;
  border-bottom: 1px dotted grey;
  min-width: 10px;
  height: 1em;
}

They are all shown here: https://jsfiddle.net/rzmLg4yu/62/

Each of these techniques has its own pitfalls in my case.

Has dot leaders at last line.
Does not work over complex background, even with mix-blend-mode (uncomment bg line to see).
Has large white gaps due to line breaks (resize to see). Switching to grid is no use.

Is there more solutions to this case?

user_15273968 · Answer

Technic 3 can be improved to get rid of the wrapping gaps:

body {
  color: grey;
}

.width {
  width: 300px;
  padding: 5px;
  resize: horizontal;
  overflow: hidden;
  abackground: linear-gradient(45deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

.item3 {
  display: flex;
  align-items: flex-start;
}

.dots3 {
  flex-grow: 1;
  border-bottom: 1px dotted grey;
  min-width: 10px;
  height: 1em;
}

.text3 {
  padding-right: 0px;
  text-align: justify; /* <--- */
}



  
    
        3 Text text
      
    
    
        $100
      
  
  
    3 Text text text text text text text text text text text text text text text text
    
    
        $100

Here text-align: justify; will space the words evenly.

I think your issue with the second technic is because of white background color right?
because of .bg2 {background: white;...}?
Otherwise, you should've used mix-blend-mode: lighten; to demonstrate the issue:

body {
  color: grey;
  padding: 20px;
}

.width {
  width: 230px;
  padding: 5px;
  resize: horizontal;
  overflow: auto;
  background: linear-gradient(90deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

div>div {
  background-color: white;
  border: 2px solid green;
}

.simpleDiv1 {
  mix-blend-mode: darken;
}

.simpleDiv2 {
  margin-top: 20px;
  mix-blend-mode: lighten;
}


  darken blend. Simple text without any styles and stuff.
  lighten blend. Simple text without any styles and stuff.

If you use darken blend then any normal text will disappear with that background, let alone dot leaders.

Technic two without background white:

body {
  color: grey;
  padding: 20px;
}

.width {
  width: 230px;
  padding: 5px;
  resize: horizontal;
  overflow: hidden;
  abackground: linear-gradient(90deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

.item2 {
  display: flex;
  justify-content: space-between;
  position: relative;
  mix-blend-mode: darken;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: white;
  text-decoration-thickness: 2px;
}

.item2::before {
  content: '\00a0';
  height: calc(1em - 0.5px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px dotted gray;
  z-index: -1;
}



  
    
        2 Text text
      
    
        $100
      
  
  
    
        2 Text text text text text text text text text text text text text text text text
      
    
        $100

Here I'm using white underline, instead of whole white background, to hide dotleader. But you'll get white underline while using some blend modes.

Technic three can be improved if we are willing to break words while wrapping:

body {
  color: grey;
}

.width {
  width: 300px;
  padding: 5px;
  resize: horizontal;
  overflow: hidden;
  abackground: linear-gradient(45deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

.item3 {
  display: flex;
  align-items: flex-start;
}

.dots3 {
  flex-grow: 1;
  border-bottom: 1px dotted grey;
  min-width: 10px;
  height: 1em;
}

.text3 {
  padding-right: 0px;
  word-break: break-all;
}



  
    
        3 Text text
      
    
    
        $100
      
  
  
    3 Text text text text text text text text text text text text text text text text
    
    
        $100

Here instead of wrapping on word boundaries, I'm wrapping on letter boundaries using word-break: break-all. If your font-size is 1em, then this way the maximum gap will be less than 1em, because browser won't be able to fit a letter less than 1em space.

user_6263942 · Answer

Three improvements for the second technique

I suggest using the value multiply for the mix-blend-mode property. In the case of dark text, it gives a sharper result even on a gradient background. Look the first demo.
We can simplify layout of the second technique with a help of the ::first-line pseudo-element. It can be used with "only a small subset of CSS properties", but this subset contains all background-related properties.
I think this also gives a better result against mix-blend-mode: darken. Compare the second and third demo.
And the gap property helps to set the minimum gap between the text and the price.

There are three demos in the snippet below:

First one shows mix-blend-mode: multiply in action.
The other two compare the effect of mix-blend-mode: darken on two layouts - with an extra bg block and with the ::first-line pseudo-element.

https://codepen.io/glebkema/pen/NWapXPQ?editors=1100

body {
  color: grey;
}

.width {
  width: 300px;
  padding: 5px;
  resize: horizontal;
  overflow: hidden;
  background: linear-gradient(45deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

.item2 {
  display: flex;
  justify-content: space-between;
  position: relative;
  mix-blend-mode: darken;
  gap: 10px;                 /* 3) */
}

.multiply .item2 {
  mix-blend-mode: multiply;  /* 1) */
}

.item2::before {
  content: '';
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  border-bottom: 1px grey dotted;
}

.bg2 {
  background: white;
  position: relative;
  z-index: 1;
}


.price4,
.text4 {
  z-index: 1;
}

.price4,
.text4::first-line {         /* 2) */
  background: white;
}

mix-blend-mode: multiply;

    
        
            
                2 Text text
            
        
        
            
                $100
            
        
    
    
        
            
                2 Text text text text text text text text text text text text text text text text text
            
        
        
            
                $100
            
        
    

    


    
        
            4 Text text
        
        
            $100
        
    
    
        
            4 Text text text text text text text text text text text text text text text text text
        
        
            $100
        
    


mix-blend-mode: darken; (2nd method before 4th)

    
        
            
                2 Text text
            
        
        
            
                $100
            
        
    
    
        
            
                2 Text text text text text text text text text text text text text text text text text
            
        
        
            
                $100
            
        
    

    


    
        
            4 Text text
        
        
            $100
        
    
    
        
            4 Text text text text text text text text text text text text text text text text text
        
        
            $100
        
    


mix-blend-mode: darken; (4th method before 2nd)

    
        
            4 Text text
        
        
            $100
        
    
    
        
            4 Text text text text text text text text text text text text text text text text text
        
        
            $100
        
    

    


    
        
            
                2 Text text
            
        
        
            
                $100
            
        
    
    
        
            
                2 Text text text text text text text text text text text text text text text text text
            
        
        
            
                $100

user_4177852 · Answer

Even the W3C official source has some disparity. You may see inconsistent rendering or poor support for invented features (such as non-monospace/preformatted, lead zero padding, varied currency widths).

Using a shim or Web Component such as Leader-Line would be advisable. I would recommend you experiment with dash-animation to increase visibility on busy backgrounds (at the expense of annoying someone with a busy leader).

user_7299104 · Answer

You can modify technique 1 to move the dot functionality from the text to another span:


  
    Text
  
  
  
    $100
  


  
    Text text text text text text text text text text text text
  
   
  
    $100
  


  
    Text text text text text text text text text text text text

.item1 {
  display: flex;
}
.line1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.line1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted grey;
  width: 100%;
}
.price1 {
  align-self: flex-end;
}

This works as intended:

And a JSFiddle

user_12818154 · Answer

.item1 {
  display: flex;
  font-size:32px;
  color:#808080;
}
.line1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.line1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted #808080;
  width: 100%;
}
.price1 {
  align-self: flex-end;
}


  Text text
  
  $100


  Text text text text text text text text text
   
  $100


  Text text text text text text text

CSS dot leaders at first line over complex background

5 Answers

Three improvements for the second technique