As a dedicated frontend developer, I believe in creating underlines with a 2px padding instead of the default 1px. Is there an easy solution for achieving this?
PS: Yes, I am aware of using a div with a black background color and 1px * Npx with position: relative, but it tends to slow things down...
To ensure compatibility across different browsers, it is recommended to utilize the text-underline-offset property instead of text-underline-position. This is because text-underline-position lacks support in iOS Safari as indicated on this page.
For a more detailed explanation, refer to this answer:
#line{
text-decoration-line: underline;
text-underline-offset: 2px;
}
If you want to enhance the text, consider enclosing it in a span element and applying a border-bottom with some padding-bottom:2px;.
Here's an example of how you can achieve this:
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Check out this live example: http://jsfiddle.net/uSMGU/
An effective method to achieve this without the need for extra spans and with greater flexibility is by utilizing the :after selector.
This technique can be particularly beneficial for enhancing navigation menus:
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
To adjust the spacing between the text and the underline, simply add a margin-top.
If you desire a thicker underline, increase the value of the height property:
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
#line{
text-decoration-line: underline;
text-underline-offset: 1px;
}<div id="line">
Text with line
</div>simply utilize
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
To achieve an underline effect, you can implement the following CSS:
text-decoration: underline;
text-underline-position: under;
What are your thoughts on implementing
border-bottom:1px; padding:customize-with-your-preferred-valuepx.my-text-with-line {
text-decoration: underline;
text-underline-offset: 8px;
}
Click here to see how I solved the problem.
HTML Code
<div>Hello world!</div>
CSS Styles
div {
color: green;
font-size: 18px;
text-align: center;
}
a:hover {
background-color: yellow;
}
div span {
display: inline-block;
border: 1px solid black;
padding: 5px;
}
I followed the advice from @jake, however, I encountered an issue with the horizontal alignment.
My navigation links are set to flex row and center aligned, but his solution caused the element to shift upwards in order to maintain horizontal center alignment.
To resolve this, I made the following adjustments:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // The sum of margin and height should
height: 0.4rem; // equal the margin of the active link
background: $e1-red;
display: block;
}
By implementing these changes, you can ensure that the horizontal alignment is maintained.
To achieve this effect, you can employ a clever workaround using ::after pseudo-elements and positioning them manually. Although it requires updating the content attribute of the after element, you can simplify the process by utilizing a data attribute in the HTML tag and referencing it accordingly. Take a look at the example provided below -
span:after {
font-size: 1rem;
position: absolute;
content: 'Hello there..';
width: 100%;
height: 100%;
white-space: pre;
text-decoration-skip-ink: none;
text-decoration-line: underline;
left: 0px;
top: 10px;
color: white;
z-index: -1;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: black;
}
span {
position: relative;
}<span>Hello there</span>Give this a shot:
.customDiv{
border-bottom: 1px solid #000;
line-height: 2;
}
Is there a way to ensure smooth animations by utilizing GPU acceleration for CSS transforms in browsers? When does this acceleration occur and how can it be forced? For more information, check out this article ...
Recently, I've been on a mission to create a Google Workspace Add On that can display an iFrame. My journey led me to explore the documentation for Google Apps Script and Google Add Ons. From what I've gathered so far, it seems that I'll ne ...
During my recent project, I utilized Dropzone.js for image uploads. However, I am now interested in transforming the dropzone area into an actual image. For instance, if there is a "featured image" attached to an article, users should be able to drag and ...
Here is the HTML code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></ ...
I am working with an XSL file that converts to PDF. The top of the page contains a lengthy CSS style declaration: <xsl:attribute-set name="Header"> <xsl:attribute name="font-size"> <xsl:value-of select="$font-size"/> < ...
As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...
In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...
As an aspiring Bootstrap and Ruby on Rails developer, I am in need of an adaptable "div" element. Here is my current code snippet: <div class="container-fluid"> <div class="row-fluid"> [if true] <div class="span2"> div1 ...
My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div. I have implemented click events for both divs. However, when I click on the span that overlaps the second d ...
Having some challenges with the migration from Angular 14 to Angular 15 when it comes to overriding material UI elements and themes. Looking for blog posts or documentation that can provide guidance on how to smoothly transition. Specifically, experiencin ...
Check out the CodePen I'm currently working on where I have included the following Jquery code to create a tab-style interface where each button displays specific content. Here's the Jquery code I'm using: $('.content-canvas').fi ...
I'm struggling with my PHP code and need some assistance. I want to echo an HTML input field with a specific value from a variable, but it's not working as expected. Can anyone provide guidance on what might be going wrong? echo "<input type= ...
I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...
Challenge: I'm facing an issue with my <v-container> component not consistently spanning the entire height of the application. Despite trying various methods such as using the fill-height property, setting height: 100%;, height: 100vh;, and expe ...
How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...
I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...
I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...
Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...
I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...
I'm looking to give my website a fresh look by creating two different global CSS styles. Is it possible to use one CSS style for the old pages and another for the new pages? ...