I'm attempting to create a title style similar to what is shown below
https://i.sstatic.net/Qao4g.png
The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking for.
Here's my code:
<h1>Sign In</h1>
<style>
h1:after{
content: '';
position: relative;
width: 102px;
height: 10px;
background-color: rgba(40,84,161,1);
}
</style>
To add a stylish border-bottom to the last word of a title, you can use JavaScript to split the content and wrap the last word in a span element.
In this example, I demonstrate how to achieve this using a reusable function that works on titles of any length.
function addBorderToLastWord(element)
{
var words = element.innerHTML.split(" ");
var lastWord = words.pop();
var firstWords = words.join(" ");
element.innerHTML = firstWords + "<span>" + lastWord + "</span>";
}
var elements = document.querySelectorAll(".add-border");
elements.forEach(item => addBorderToLastWord(item));.add-border > span {
padding-bottom: 2px;
border-bottom: 5px solid red;
}<h1 class="add-border">Welcome aboard!<h1>
<h1 class="add-border">Hello there.<h1>
<h1 class="add-border">Goodbye.<h1>
<h1 class="add-border">Incredible journey awaits<h1>To emphasize certain words, enclose them in <u> tags. For instance:
<p>Click <u>Here</u></p>
Using only CSS might not be sufficient for this task. For a consistent approach in your project, consider utilizing lettering.js. Then you can implement the following:
h1
{
text-decoration:none;
}
h1::last-word
{
text-decoration:underline rgba(40,84,161,1);
}
If this situation is uncommon, you can enclose the last word within a div or span tag as some other contributors have also suggested.
Option 1:
To easily underline text, simply utilize the u tag in HTML as shown below:
<h1>Click <u>Here</u></h1>
Option 2:
If you prefer more control over the styling, use CSS to define text decoration properties:
<h1>Click <span class="underline">Here</span></h1>
In your CSS file:
.underline {
text-decoration: underline;
}
<h1>Enter <span class="text-highlight">Now</span><h1>
<style>
.text-highlight {
text-decoration: underline;
text-decoration-color: red;
}
</style>
I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...
I am currently working on developing an app using phonegap. At the moment, I have the reference to a script in every page like this: <script language="javascript" src="http://someServer/js/myscript.js"></script> If the server 'someServer ...
I need assistance with customizing my dropdown select option - see the example below <select> <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> <option value="saab">Saab</option> <option val ...
Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...
Currently, I am working on a project that involves a database containing locations specified by longitude and latitude. Upon loading the index page, my goal is to fetch the user's location and then identify every point within a certain distance radius ...
Currently, I am faced with the task of compiling my app.scss file for a new Laravel project. However, I am hoping to integrate Bootstrap 4 into the project instead of relying on the default Bootstrap that comes with Laravel. Unfortunately, when running npm ...
I'm currently working on mimicking the style of Google Calendar, and I've encountered an issue with the text input box. When clicked, it should look like this: https://ibb.co/6Hqrnt4 However, what I've created ends up looking like this: htt ...
I have been attempting to place an image next to some text within my navbar-brand, but so far I have not been successful. Is there a way to achieve this without resorting to "hacking" bootstrap? Below is the code I have tried: <header> <nav ...
Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...
When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...
I'm struggling with centering a grid element in MUI v5 and aligning a long paragraph to the left side while adding horizontal margin for big screens. Can anyone help me out with this? Thank you. <Box style={{ backgroundColor:" ...
I am new to using JavaScript Speech Recognition and decided to work with the Annyang library. My goal is to automatically trigger the "show date" button when the user says 'hello', without actually clicking the button. However, I've been fac ...
I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...
I have multiple divs with id="scroll_1", "scroll_2", "scroll_3", and so on. I am trying to implement a feature where when any of these divs is in the center of the window, I want to change the background color using jQuery highlight. Currently, I am able t ...
In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...
Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...
Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...
Good day! I have encountered an issue with the required attribute on a form on my website. It seems to be working perfectly on my browser, but not on mobile devices. Has anyone else experienced difficulties with jQuery, JavaScript, or Node packages? <f ...
I'm facing an issue where the horizontal scrollbar in my p-tree component is hidden until I scroll all the way down. I've tried various CSS modifications, but nothing seems to work. It's surprising that I couldn't find anyone else with ...
Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...