How to make dot-dash underline


Tags: html,css,underline

Problem :

How to underline words with .-.-.-.-. pattern using HTML and CSS, or MS Word?

I know there are border-bottom-style properties in CSS, there are dotted and dashed styles, but there is no dot-dashed or something like that. In MS Word also there are different underline styles but not the one I need.



Solution :

you may, from an inline element, use simple border-bottom or play with gradient and multiple bg or even border-image.


demo


I like the gradient better wich allow you to do almost any pattern. (make a search on bg pattern from gradient, you will be surprised)

.dotted.underline {
  border-bottom: dotted 1px;
}

.bg {
  background: linear-gradient(to left, green 50%, transparent 50%) 0 bottom repeat-x, linear-gradient(to left, transparent 60%, red 60%, red 90%, transparent 90%) 14px 1.1em repeat-x;
  background-size: 14px 2px, 14px 2px;
  padding-bottom: 2px
}

p {
  float: left;
  width: 45%;
}
<p><span class="dotted underline">Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span></p>
<p><span class="bg">Pellentesque habitant, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span></p>


    CSS Howto..

    Chrome doesn't show the favicon

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How to version files in the section?

    How to center a ul CSS

    CSS: How to move contents of one div into another one

    How do I use css transitions to scale an image and move it at the same time?

    Textmate newbie question: how to indent CSS

    How does Apple position its slideshow inside a fixed-position box?

    how to create Active State in CSS Navigations

    How to achieve no outside margins for floats in a div

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    How to add a custom css selector to just a span??

    CSS: how to layout 3 columns, 2 are optional

    How do I calculate percentage based on pixels for CSS conversion?

    How to reserve a DIV width with “left:100%” CSS rule

    How to remove top / bottom margin from isotope masonry

    How to make navigation bar scroll with the page?

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How to create text block on image using just CSS

    How to display just part of image on hover?

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    How to show the width of an element in the content of an ':after' pseudo-element?

    css - can't get dropdown nav to show above content below it

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How to apply css on every 2nd child using nth-child() with jquery

    Jquery: show IMG on click

    How to remove dash inside text with CSS?

    How to select only some children in CSS?

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    How to send an HTML file with css?