Can CSS create a "half strikethrough" effect without relying on images?

Currently, I am in the process of developing a website that prioritizes responsiveness and speed by avoiding the use of any images. Instead, I aim to achieve desired effects solely through CSS.

In the past, I would create a particular effect using the following HTML structure:

<div class="strikethrough">
  <span>Ou</span>
</div>

accompanied by this CSS (which utilized an image):

.strikethrough {
  background: url('strip.gif') repeat-x 50% 50%;
}

.strikethrough span {
  background: #EAEBEC;
  padding: 0 5px;
  display: inline-block;
  margin: 0 auto;
}

The question at hand is whether it is possible to replicate the same effect purely through CSS?

htmlcssstrikethrough

Answer №1

<div style="height: 1px; text-align: center; background-color: black;">
  <span style="position: relative; top: -0.5em; background-color: white;">
    Either
  </span>
</div>

or

<fieldset style="text-align: center; border: 0; border-top: 1px solid black;">
  <legend>
    Either
  </legend>
</fieldset>

Answer №2

div 
{
text-align: center;
}

span
{
display: inline-block;    
}

span:before,
span:after {
border-top: 3px solid #EAEBEC;
display: block;
height: 1px;
content: " ";
width: 48%;
position: absolute;
left: 0;
top: 1.2em;
}

span:after
{
right: 0;  
left: auto; 
}


<div>
    <span>Custom</span>
</div>

Answer №3

It seems like I may be a tad bit late, but here is the information regardless. -jsFiddle

Edit- Included code for various style and updated jsFiddle

styling in css

.strikethrough{
  box-shadow: 
        0px -10px 0px 0px #EAEBEC inset, inset 0px -11px 0px 0px black;
  background: #EAEBEC;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.strikethrough span{
    background:#EAEBEC;
}

.different{
    background:white;
}
.different .strikethrough{
  box-shadow: 
        0px -10px 0px 0px #fff inset, inset 0px -11px 0px 0px black;
  background: #fff;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.different .strikethrough span{
    background:#fff;
}

markup in html

<div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span> </div>

<div class="different">
    <div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span>

    </div>
</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

Adding HTML to a webpage through the use of JavaScript's .innerHTML functionality

Currently in the process of creating a website template, I have made the decision to experiment with using an external JS file for inserting HTML at the top of the page to streamline navigation (eliminating the need for manual copying and pasting). My att ...

javascripthtml

Transform text and table from using spaces and tabs to using semicolons as separators

Having issues with the formatting of data in one table space and tab separated, needing to separate fields by semicolon. I attempted using awk directly but it didn't work as expected. Decided to create a Perl script for this task with tables styled in ...

htmllinuxperlcsvdelimiter

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

htmlcssreactjs

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

javascripthtmlstoragepersistent

How to preselect a value in a select tag in Angular 8

I am looking to assign a default value to a select tag, with the values being declared in a table within my component and displayed using the ngFor directive: <form> <div class="form-group col-4"> <span class="badge badge-theme m ...

htmlangularhtml-selectngfor

Tips for hiding a soft keyboard with jQuery

Here is a text button: <input type="text" class="field" id="something" name="something" placeholder="text" autofocus /> I want to prevent the android soft keyboard from popping up and keep the focus on this field. I only want to do this for this ...

javascriptandroidjqueryhtml

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

javascripthtmlarraysreactjsdictionary

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

javascriptphpjquerycsscheckbox

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar. Despite trying various solutions from Stack Overflow, I still haven't found one that works for me. Therefore, I am rea ...

javascripthtmljquerycss

The rendering of Vue-bootstrap is not functioning correctly

I recently set up a new webpack project using Vue and Bootstrap. However, it appears that the styling for bootstrap elements such as b-nav, b-nav-item, and b-badge is not displaying correctly. This issue seems to affect most other element types as well. Y ...

cssvue.jsbootstrap-4

Incorporate new content into JavaScript using the input element

I have a unique question - can text be added to JavaScript using the input tag? For example, <input type="text" id="example" /> And let's assume the JavaScript function is: function display_text() { alert("The text entered in #example wi ...

javascripthtmlforms

Attempting to trigger the timer to begin counting down upon accessing the webpage

Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...

javascriptjqueryhtmlcss

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

javascriptjqueryhtmlcsssafari

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

javascriptcssreactjsscrollonscroll

The jQuery code I'm using is incorrectly selecting all elements with the class name "a2" when I click on them, instead of providing me with

I was hoping to see one a2 element displayed at a time when clicking on a div element, but instead, all a2 elements are appearing simultaneously. I would like to see only one a2 class element at a time upon clicking. <!DOCTYPE html> <html> < ...

javascripthtmljquery

Preventing the <img> element from being selectable and draggable simultaneously is effective in Firefox, but not in Chrome or Opera

I have a picture that I want to render both unselectable and undraggable. (This is not an attempt to prevent users from copying) To accomplish this, I can: Add a .noselect class to the <img> tag. As recommended here. Disable pointer-events. (I am ...

htmlcssgoogle-chromefirefoxopera

Ways to insert a div element into the HTML display utilizing JavaScript

There's a method I'd like to use to dynamically add a div to the view using JavaScript. I attempted hiding the div on page load and then showing it through JavaScript. However, what ends up happening is that the div content appears briefly on l ...

javascripthtmljquerycss

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

javascripthtmlcachingprogressive-web-apps