What is the best way to prevent the registered symbol from showing an underline?

I need help figuring out how to display part of a word with an underline, and part of it without. Specifically, I want the "registered" symbol to not have an underline.

Here is the HTML code snippet:

<h3>Basecamp<span class="sup">&reg;</span></h3>

And here is the CSS code snippet:

h3 {
font-size: 21px;
color: #369;
font-weight: bold;
text-decoration: underline;
margin-top: 5px;
padding: 5px;
}

.sup {
vertical-align: super;
text-decoration: none; /*how do i remove this?!*/
font-size: 50%;
font-weight: 400;
}
htmlcss

Answer №1

To achieve the desired layout, utilize the CSS property display: inline-block

Check out this example on JSFiddle: http://jsfiddle.net/WYwv2/3/

If you're curious about why this approach works, take a look at the specifications

When dealing with block containers that set up an inline formatting context, any decoration will be applied to an anonymous inline element that encloses all in-flow inline-level child elements of the block container. However, for all other elements, decorations are only passed down to in-flow children. Keep in mind that text decorations do not extend to floated or absolutely positioned descendants, as well as to the content within atomic inline-level descendants like inline blocks and inline tables.

Answer №2

In order for this to function properly, it is necessary to segregate the remaining text from the registered symbol.

h3 {
font-size: 21px;
color: #369;
font-weight: bold;
margin-top: 5px;
padding: 5px;
}

h3 span {
text-decoration: underline;
}


h3 span.sup {
text-decoration: none;
vertical-align: super;
font-size: 50%;
font-weight: 400;
}


<h3><span>Basecamp</span><span class="sup">&reg;</span></h3>

http://jsfiddle.net/rohitazad/yTP9q/2/ <-- updated thanks Rohit

Answer №3

Take a look at the demonstration here: DEMO

h3 span {
vertical-align: super;
text-decoration: none; 
font-size: 50%;
font-weight: 400;
display:inline-block;
}

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

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

javascripthtmlcssbootstrap-5

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...

javascripthtml

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css

Is there a way to prevent javascript from automatically inserting tags when selecting text?

If you want to view the Fiddle Here Essentially, it's a text-highlighting tool that works almost flawlessly. The problem arises when it encounters tags like <p> or <br> within the selection. The JavaScript code seems to automatically in ...

javascriptjqueryhtml

Interactive Image Carousel Using <ul> and <li> Tags

I am facing an issue with my image gallery slideshow using <ul> and <li> in HTML and CSS. The problem is that it is not responsive on mobile devices, as evidenced by the link provided herehere (I am accessing it from a smartphone). In the ima ...

htmlcssbootstrap-4

Issue with Dotless MVC bundling occurring when attempting to import a specific less file multiple times

Trying to achieve a specific structure using dotless: styles/variables.less - contains all variables like this @color:green; styles/component1.less - random component specific style importing variables.less @import "variables"; body { ba ...

cssasp.net-mvclessbundling-and-minificationdotless

Locating username and password elements using Python and Selenium

Attached are 2 screenshots displaying the html code of a website. I am curious about the "find driver element" formats needed to input my username and password into the proper boxes. View Image1 View Image2 Your assistance is greatly appreciated. ...

pythonhtmlselenium

Focus on selecting the first child <li> element that contains an <a> tag within it

Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...

javascriptjqueryhtml

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

javascripthtmlcssvertical-alignment

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

I utilized the angular 6 datatable to paginate the data in a table format. https://www.npmjs.com/package/angular-6-datatable Everything is functioning properly, but I am struggling with styling the footer of mfBootstrapPaginator. https://i.sstatic.net/i ...

htmlcssangulartwitter-bootstrapdatatable

Adjust the vertical position of the image with HTML and CSS

I want to adjust the positioning of the image below the blue navigation bar so that it aligns with the main content area below, creating the appearance of a shaded box around the webpage's content. The image in question is boy_top.png. Is there a way ...

csshtml

Wowslider is functional, however it fails to show the images

As a brand new user with limited knowledge, I am determined to figure things out on my own and make progress. Currently, I am using Wowslider on my website to showcase images. Although the slider (carousel) is functioning properly, it is not displaying a ...

jquerycsswowslider

What criteria does a PHP function need to meet in order to be considered valid for use with AJAX and PHP?

My website includes an input field that undergoes real-time checking via AJAX requests to inform users if their input is valid or not. Upon submission, the input must be rechecked to ensure it meets the same criteria as checked by AJAX (in case JavaScript ...

javascriptphpjqueryhtmlajax

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

cssasynchronouspreloadlighthouse

Having trouble navigating to the HTML page using AngularJS

When trying to navigate to another HTML page in my Angular app by clicking a button, I encountered an issue where it did not redirect to the expected page. Here is how I configured the routing: angular.module("abc", ["ngRoute"]) .config(function ( ...

jqueryhtmlangularjs

When I click on the event target, it selects the button within the span. What is the next step I should take

I have a button element that contains a span, and I want to extract the value associated with the button when it is clicked. However, if I click on the span inside the button, I am unable to retrieve the desired value because the event target points to the ...

htmlvue.jsbuttonvue-component

Show fixed div at specific height

Is there a way to have a fixed title in a DIV that only displays once the user scrolls to the relevant section on the website? I'm looking for a solution where the DIV is hidden until the section is reached during scrolling. ...

javascriptjquerycss

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options: HTML: <ul> <li>Option Zero&l ...

jquerycssdrop-down-menu

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

javascriptcsshtml