CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

I am trying to achieve a unique design with only one <span> that has three different text decorations (underline, strikethrough, and overline) like this: (This is just an example, I need it to be changeable)
https://i.stack.imgur.com/61ZnQ.png
However, using multiple text-decorations in one element like this doesn't seem to work:

span {
    text-decoration: overline dotted green;
    text-decoration: line-through wavy aqua;
    text-decoration: underline double red;
}

Is there a way to achieve this effect using only one <span>? Could I potentially utilize ::after and ::before, or employ languages such as SASS or LESS?
Thank you for your assistance.

htmlcss

Answer №1

Utilize the display:inline-block property along with border-top, border-bottom, and text-decoration

span{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double red;
  text-decoration: line-through wavy aqua;
}
<span>Some Text</span>

Regarding the initial comment 

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
}

span:before {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: overline wavy black;
  z-index:-1;
  color:white;
}
<span>Some Text</span>

About the final comment

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "S";
  left: 0;
  top: -100%;
  text-decoration: underline wavy black;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}

span:before {
  position: absolute;
  content: "S";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}
<span>Some Text</span>

Answer №2

span1 {
    text-decoration: line-through overline underline dotted green;    }
<span2 {
    text-decoration: line-through overline underline wavy aqua;
}
span3 {
    text-decoration: line-through overline underline double red;
}
<span1>Some text</span1>
<span2>Some text</span2>
<span3>Some text</span3>

Answer №3

Consider implementing display block and borders in your design

span{
  display:block;
  border-top:dotted 5px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
  font-size:5rem;
  width: auto;
}
<span>Some Text</span>

Answer №4

Hopefully the code provided below will be of assistance to you:

<!DOCTYPE html>
<html>
<head>
<style>
span1{
    text-decoration: underline;
}
span2{
    text-decoration: line-through;
}
span3{
    text-decoration: overline;
}
</style>
</head>
<body>
<span3><span2><span1>sometext</span1></span2></span3>
</body>
</html>

Answer №5

span {
  display: inline-block;
  text-decoration: line-through overline underline;
  border-width: 1px 2px 3px 4px;
  border-style: solid dashed dotted none;
  border-color: red green blue yellow;
  padding: 10px;
}
<span>Text decoration</span>

Answer №6

For instance :

span:first-child{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
}
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>

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

Display a message on the webpage itself, not in a pop-up, when the value exceeds 1 using JavaScript

I need help with a condition involving a variable called "truecount." If this value is less than one, I would like to display an error message on the screen instead of an alert popup. Could someone assist me with this? I am new to this and don't have ...

javascripthtml

Accepting PHP multidimensional array through ajax

My PHP code includes a script to open a database, fetch data, and encode it into JSON format. include_once($preUrl . "openDatabase.php"); $sql = 'SELECT * FROM dish'; $query = mysqli_query($con,$sql); $nRows = mysqli_num_rows($query); if($nRow ...

javascriptphphtmlajaxhtml-framework-7

A guide on dynamically adjusting text size based on viewport width and height in React with TailwindCSS

Utilizing React and Tailwind, I am working towards creating two overlapping rectangles with text. The top rectangle's text should be aligned to the left, while the bottom rectangle's text should be aligned to the right. Regardless of window size ...

htmlcssreactjstailwind-css

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

There are various components displayed on my webpage: I require all components to have a minimum height of 150px. If the height is less than 150px, I want to vertically center their text. In case the height exceeds 150px, I aim to truncate the text at 15 ...

javascripthtmlcss

Selenium was unsuccessful in finding the text on the webpage

Trying to extract Amazon reviews for a specific product, the text for ratings cannot be located using selenium. However, it can be easily extracted using soup. Link to page: Sample code using Soup: link='same link as mentioned above' url=requ ...

pythoncssseleniumwebdriverwait

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

javascripthtmlcssangular

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

javascripthtmlcssreactjs

What steps should I take to troubleshoot and resolve a malfunctioning jQuery hoverOut function?

There seems to be a issue with the code. The website successfully detects when the mouse hovers over the element and logs it in the console, however, there is an error when trying to log out when the mouse leaves the element. $('.designer'). ...

htmljquery

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

jquerycss

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3

HTML File Path for C Drive

I am a beginner with HTML and I'm facing an issue regarding displaying an image located at "C:\Users\Jas mine\folder\landscape.jpg" in HTML. I have tried various solutions posted by others but none of them seem to work for me. Can ...

htmlimagepath

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

javascriptjqueryhtmlcssfunction

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...

htmlcontenteditable

Is there a way to display a button and text upon hovering over an image without using JQuery?

On my current WordPress project, I am faced with the task of creating a gallery that displays text and a button when users hover over an image. I have attempted to use a:hover but have only been able to make limited modifications. Can anyone provide guid ...

javascriptjqueryhtmlcsshover

What methods can be used to stop HTML5 audio from pre-downloading or streaming upon loading?

I am experiencing slow load times on my single page website that features a variety of HTML5 audio players. The issue seems to stem from certain browsers predownloading the content (mp3 and ogg). Internet Explorer Google Chrome Firefox Safari (probably Op ...

performancehtmlaudioaudio-streaming

Pass information from a row to an AngularJS controller upon clicking the checkbox within the row

I need help with some HTML code that utilizes AngularJS to display a table. Each row in this table contains a checkbox. Here is a snapshot of the table layout: https://i.sstatic.net/ibDor.jpg Below is the actual HTML code: <div ng-app ng-controll ...

htmlangularjscheckbox

Revamped Web Presentation: The Dynamic Blend

I'm struggling to arrange a section in the same way as shown in this image. https://i.stack.imgur.com/QVDHn.png I have been using bootstrap 4 and have experimented with rows and columns, but haven't been able to achieve the desired layout. Curr ...

htmltwitter-bootstrapbootstrap-4layouthtml-lists

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

javascriptcsstwitter-bootstrapbootstrap-4

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

javascripthtmlcss

Sticky Angular Headers

I am struggling to create a table on my angular page that has fixed headers and footers. <table class="table table-bordered table-striped table-hover" fixed-header> <thead> <tr> <th>Name</th> <t ...

htmlcssangularjshtml-table