Question 271978 in Html Question posted in
Some basic documentation can be found here.

Html – Draw a colourful line and end with a dot / circle under the text using css

How to draw a colorful line and end with a dot under the text using css like this picture?

The underline start with spaces / padding.

picture

.underline {
  text-decoration: underline;
  text-underline-offset: 10px;
  display: inline-block;
  position: relative;
  padding: 20px 0px;
  color: #2af6ff;
}

.underline::before {
  transform: translateX(-50%);
  border-radius: 100%;
  position: absolute;
  background: #2af6ff;
  bottom: 10px;
  height: 10px;
  content: '';
  width: 10px;
  left: 100%;
}
<div class="h3 fw-bolder mt-4 px-5"><span class="underline">Summary</span></div>
Tags:

3

Answers


  1. 0

    Here is a working example of what you want

    .underline{    
    display: inline-block;
    position: relative;
    padding: 20px 0px;
    color: #2af6ff;  
}
.underline::before {
  position: absolute;
  background: linear-gradient(90deg, rgba(147,73,209,1) 0%, rgba(83,241,254,1) 100%);
  bottom: 10px;
  height: 4px;
  content: '';
  width: calc(100% - 2px);
  left: 0;
  transform:translateY(-2px);
}

.underline::after {
  transform: translateX(-50%);
  border-radius: 100%;
  position: absolute;
  background: #2af6ff;
  bottom: 10px;
  height: 10px;
  content: '';
  width: 10px;
  left: 100%;
}
    <div class="h3 fw-bolder mt-4 px-5"><span class="underline">Summary</span></div>

    enter image description here

    Login or Signup to reply.
  2. 0

    try this:

    .fw-bolder {
    --start-color: #0099ff;
    --end-color: #2af6ff;
}

.underline {  
    position: relative;
    display: block;
    padding: 20px 0px;
    color: #2af6ff;  
    text-align: right;
}

.underline::before {
  content: "";
  height: 1px;
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  background: linear-gradient(to right, var(--start-color), var(--end-color) 80%);
}

.underline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--end-color);
}

    Pseudo element "before" is used for border bottom (it isn’t a real border, so you can use linear gradient as background), and "after" is used for circle at right.

    Login or Signup to reply.
  3. 0

    I would remove the use of an HTML element which is merely adding some styling – try to keep content and style separate.

    This snippet uses both before and after pseudo elements to create the line and the circle.

    A linear-gradient background image is given to the line.

    Padding is given to the element itself on the left hand side and box-sizing is set to border-box so that the word is offset but the pseudo element drawing the line can pick up the full width.

    .underline {
  padding-left: 100px;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  color: #2af6ff
}

.underline::before {
  content: '';
  width: 100%;
  height: 2px;
  display: inline-block;
  position: absolute;
  transform: translateY(-50%);
  left: 0;
  top: calc(100% + 10px);
  z-index: 1;
  background: linear-gradient(to right, purple, #2af6ff);
}

.underline::after {
  transform: translate(-50%, -50%);
  border-radius: 100%;
  position: absolute;
  background: #2af6ff;
  top: calc(100% + 10px);
  height: 10px;
  content: '';
  width: 10px;
  left: 100%;
}
    <div class="underline">Summary</div>`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search