Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Can you create a vibrant line with a dot underneath text using CSS, similar to the example shown in the image?

The underline should begin with some spacing or padding.

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

htmlcssbootstrap-5

Answer №1

Check out this detailed demonstration that meets your requirements:

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

https://i.sstatic.net/6T3as.png

Answer №2

Give this a shot:

.fw-bolder {
    --primary-color: #00ccff;
    --secondary-color: #37f9ff;
}

.underline {  
    position: relative;
    display: block;
    padding: 25px 5px;
    color: #37f9ff;  
    text-align: center;
}

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

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

The pseudo element "before" creates a decorative underline using a linear gradient as the background, and "after" adds a circle at the end of the line.

Answer №3

I suggest removing the unnecessary use of an HTML element for styling purposes to maintain a clear separation between content and style.

This code snippet utilizes both before and after pseudo elements to create a line and circle effect.

The line is created using a linear-gradient background image.

The element itself has padding on the left side, and box-sizing is set to border-box so that the word is offset while allowing the pseudo element drawing the line to span 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>

Answer №4

Utilizing two gradients for the task

.underline {
  --s: 12px; /* adjust the size */

  padding-left: 100px;
  padding-bottom: calc(var(--s) + .3em);
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  color: #2af6ff;
  background: 
    no-repeat linear-gradient(90deg, purple, #2af6ff)
     0 calc(100% - calc(var(--s)/3))/100% calc(var(--s)/3),
    radial-gradient(#2af6ff 70%,#0000 72%)
     100% 100%/var(--s) var(--s) no-repeat;
}
<div class="underline">Summary</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

htmlcss

Adjust the dimensions of the image carousel in Twitter Bootstrap

Here is the code that I am currently working with: <div class="col-sm-4"> <div class="card"> <div class="card-block"> <div class="col-sm-4"> <div id="carouselExampleIndi ...

htmlcsstwitter-bootstrap-3

The automatic selection process for IE document modes

It may seem simple, but I'm a little perplexed about how IE decides which browser mode to use. In IE9, there are options such as IE9 Compatibility Mode, IE9, IE8, and IE7. These modes are selected automatically depending on the webpage. Can someone e ...

htmlinternet-explorer

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

javascriptjqueryhtmlcss

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

I have been tackling a unique challenge with my custom CMS in Drupal for a couple of weeks now. I am facing an issue where I need to dynamically load a URL by extracting the node ID from the target Drupal page and appending it to the base URL of the websit ...

htmliframejquery

The collision function is currently not functioning properly, causing a hindrance in movement. There are no other codes restricting movement

const rightPressed = false; const leftPressed = false; const upPressed = false; const downPressed = false; const players = []; players[0] = new victim(1234); const arrayw = 50; const arrayh = 50; const canvas = document.getElementById("myCanvas"); const ...

javascripthtml

Battle of Cookies and User Preferences: Who Will Prevail?

Recently, I encountered a challenge while developing an ecommerce site. After facing numerous issues, I believe I may have finally found a solution. (For more details on the problem and my question, click here) The expected scenario: Users checkout and p ...

phphtmlcookies

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Traverse a deeply nested JSON structure

I need assistance with looping through a complex JSON object using only JavaScript. My goal is to log each item along with its properties into the console. const nested_json = { "item1":{ "name": "banana", ...

javascripthtmljson

Ensure proper tagging by adding a closing tag to the HtmlElement in HtmlUnit

I am looking to convert an Html page to pdf, but the HtmlPage contains many unclosed tags like: < hr > < br > Because of these unclosed tags, I am unable to create a Pdf. Is there a way to close these tags using HtmlUnit in Java? What I need ...

javahtmlhtmlunit

Obscure silhouette enveloping the text enclosure

I'm a beginner in CSS and I need to create a text box like this: https://i.sstatic.net/4HQ4n.png My supervisor asked for a shadow effect around the box when clicked. How can I accomplish this? Any assistance would be greatly appreciated. ...

htmlcss

What is the right way to efficiently rotate a View in React Native?

Here is my code snippet: <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}> <Text>Hi</Text> </View> The result can be seen here: https://i.sstatic.net/C9ryl.jpg Unf ...

cssreact-nativejsx

The Bootstrap accordion refuses to expand on a single webpage

After implementing the example code from getbootstrap.com on my index page, I encountered an issue when trying to use it again on a different page of the same site. The content displays correctly, but it is non-responsive and does not expand or collapse as ...

bootstrap-5bootstrap-accordion

Having trouble loading static CSS files in Django

Need help linking the main.css file in my index.html <link rel="stylesheet" href="{% static 'assets/css/main.css' %}"/> I have also included {%load static%} Here is my file structure: signup/static/assets/css/main.css In settings.py S ...

pythoncssdjango

What steps should I take to fix an error in my code?

My current objective is to write a program that generates a square with dimensions of 200 pixels by 200 pixels. The square should be colored using specific RGB values: red (red value of 255), green (green value of 255), blue (blue value of 255), and magent ...

javascriptcssfunctionif-statementdebugging

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...

cssfirefox

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

My webpage has multiple divs that share a similar structure: <div style="height:200px; overflow:auto;"> <div style="height:300px;"> <!--There is a lot of content here--> </div> </div> When the user hovers ove ...

javascripthtmlscroll

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

htmlcss

Assign the appropriate label to the HTML checkbox based on the value obtained from the function

I have managed to successfully initiate the HTML service and display the checkbox itself. However, I am facing a challenge in displaying text next to the checkbox as a label. My goal is to have this label text be the return value of a function in the .gs f ...

javascripthtmlgoogle-apps-script

Is it possible to use jQuery to highlight HTML tags within a textarea field?

Is there a simple method using jQuery to highlight html-tags in red within a textarea? I'm clueless about how to achieve this since HTML tags aren't allowed in textarea, correct? :( Alternatively, can someone provide me with some helpful resour ...

jqueryhtmltagstextareasyntax-highlighting