How can we ensure that an inline-block span inherits the text-decoration property from all of its ancestor elements?

I created an inline-block span inside u and s tags, hoping it would display with both strike-through and underline text decorations, but unfortunately, neither of them appeared.

If I set its text-decoration to inherit, it will only inherit the text decoration from its parent, not from any other ancestors.

How can I achieve this goal: while keeping it as inline-block, it should inherit the text decorations of all its ancestors?

span {
  display: inline-block;
}
<u>
  <s>
    yes <span>man</span> no
  </s>
</u>

css

Answer №1

Here is a solution you can implement:

u s span {
  display: inline-block;
  text-decoration: underline line-through;
}
<u><s>yes <span>man</span> no</s></u>

To achieve the same text-decoration effect as nested <u> and <s> elements, you can use text-decoration: underline and line-through for the <span> element in CSS.

You can handle different tag combinations with the following CSS code:

.editor-container u s span, 
.editor-container s u span {
  display: inline-block;
  text-decoration: underline line-through;
}
.editor-container u span {
  display: inline-block;
  text-decoration: underline;
}
.editor-container s span {
  display: inline-block;
  text-decoration: line-through;
}
<div class="editor-container">
  <u><s>yes <span>man</span> no</s></u>
  <s><u>yes <span>man</span> no</u></s>
  <u>yes <span>man</span> no</u>
  <s>yes <span>man</span> no</s>

  <b><s>yes <span>man</span> no</s></b>
  <s><b>yes <span>man</span> no</b></s>
  <strong><s>yes <span>man</span> no</s></strong>
  <s><strong>yes <span>man</span> no</strong></s>
  <i><s>yes <span>man</span> no</s></i>
</div>

You can simplify the styling by setting display: inline; for the <span> element of the editor container:

.editor-container span {
  display: inline;
}
<div class="editor-container">
  <u><s>yes <span>man</span> no</s></u>
</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

How to Create a React Material UI Switch with Minimal Padding

I need a compact Switch component without any additional dimensions or spacing Check out this custom Switch component <Switch checked={isSubscriptionStatusActive} onChange={onHandleChangeSubscriptionStatus} disabled={subscriptionStat ...

cssreactjsmaterial-ui

Label text will not be wrapped in front of the label (bootstrap)

I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: https://i.sstatic.net/RBIOS.png. However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and ...

htmlcsstwitter-bootstrap

Guide to making a mobile number input field with a constant country code

I'm struggling to create a mobile input box that separates the mobile number and country code with a divider or fixes the country code in the field without success. Something similar to this image: https://i.sstatic.net/6HwYdZrB.png But I don't ...

htmlcssbootstrap-4

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both ...

htmldomcss

Customize the width and padding of your data tables

I have several tables with different padding and width settings. Previously, I had set these inline without any issues. However, now that I am using data tables, the inline styles are not working. If you need more information about Datatables, check out t ...

javascriptjquerycssdatatables

Tips for customizing the appearance of a disabled checkbox

I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...

htmlcss

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

The scroll bar of the Bootstrap modal keeps playing peekaboo every time a new modal is triggered

After trying numerous solutions without success, I am posting this question regarding an issue with the scrolling behavior of Bootstrap modals. Here is the scenario: I have 2 Modals: Modal-1 and Modal-2. When a user is inputting information in Modal-1 ...

htmlcsstwitter-bootstrapmodal-dialogbootstrap-modal

What are the steps to creating this in HTML and CSS?

The design looks great on Android devices, but on desktop, the hr tag expands out of the circle and moves towards the top of the circle #circle { border : 5px solid red; width : 40%; box-shadow : 0 0 20px red, inset 0 0 20px red; ...

htmlcssdeploymentfrontend

nsIStyleSheetService - The Gateway to Stylish CSS

I am currently utilizing nsIStyleSheetService within my Firefox extension to apply a custom stylesheet to every webpage. While everything is functioning properly, there are a few styles that are not being applied as expected. One of the styles causing iss ...

cssfirefox-addon

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

javascripthtmljquerycss

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...

htmlcss

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions. To achieve this, I used simple margin properties: margin: auto; position: absolute; top: 0; bottom: 0; ...

htmlcsscss-float

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

javascripthtmlcssstylesheet

What could be the reason behind my code functioning properly on CodePen but not in my editor?

I'm currently using Sublime 3 for coding in HTML and CSS. After saving the files with the proper extensions, I included the Google Fonts to use the "Lobster" font. However, upon opening the .html file on Google Chrome, the Lobster font doesn't d ...

htmlcsstwitter-bootstrap-3google-font-api

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

Tips for setting the style of child components in a ReactJS project with CSS modules, classNames, and JSX syntax

Currently in the process of setting up a project using React JS and I am interested in incorporating auth0 for authentication purposes, along with potentially integrating some serverless functions. auth0 conveniently offers a pre-made "seed" project at ht ...

csstwitter-bootstrapreactjsauth0

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm