I am looking to create a unique text effect where the underline is off-centered and overlaps the text. However, I am unsure of how to achieve this. Can someone guide me on the best way to replicate the following effect?
https://i.sstatic.net/MEyRk.png
Current Code:
.title {
font-style: italic;
}
.titleWrapper {
border-bottom: 20px solid var(--main-accent-color);
}<div className="titleWrapper">
<h2 className="title">About Me</h2>
</div>Using negative values for text-indent can be a useful technique in this situation:
.headline {
--indent: 20px;
width: fit-content;
box-shadow: 0 -10px red inset;
text-indent: calc(-1*var(--indent));
padding-right: var(--indent);
margin-left: var(--indent);
}<h2 class="title">About Us</h2>There are numerous methods to achieve this, but one simple approach is to create an accent element and position it within the container. Utilizing a modern CSS technique like display:grid; for the container can result in cleaner code structure.
In the grid layout, columns can overlap (with additional borders for clarity) while keeping the content's styling separate from the grid structure.
:root {
--main-accent-color: #ffdddd;
}
.grid-container {
display: grid;
grid-template-columns: 2rem 10rem 1fr;
grid-template-rows: repeat(2, 1fr);
border: 1px dotted orange;
}
.grid-container>* {
border: solid 1px red;
}
.title {
font-style: italic;
font-size: 1.5rem;
}
.title-accent {
background-color: var(--main-accent-color);
font-size: 0.75rem;
height: 1rem;
}
.one {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.two {
grid-column: 2 / 2;
grid-row: 2 / 3;
z-index: -1;
}<div class="titleWrapper grid-container">
<h2 class="title one">About Me</h2>
<div class="title-accent two"> </div>
</div>For positioning purposes:
:root {
--main-accent-color: #ffdddd;
}
.title {
font-style: italic;
border: solid 1px blue;
margin-bottom: 0;
}
.titleWrapper .title-accent {
display: absolute;
margin-top: -0.25rem;
margin-left: 2rem;
border-top: 20px solid;
border-top-color: var(--main-accent-color);
width: 10rem;
}<div class="titleWrapper">
<h2 class="title">About Me</h2>
<div class="title-accent"></div>
</div>While it may not be considered the recommended approach, this method still gets the job done:
.header .a {
text-decoration: none;
}
.header .more {
text-decoration: underline;
text-decoration-color: blue;
text-decoration-thickness: 2px;
}<h1 className='header'>
<span className='a'>H</span><span className="more">ome Page</span>
</h1>I have a specific dropdown menu set up, and I need to select the appropriate option from the viewdata object in my .aspx page. Here is what my menu looks like: <td headers="Vehicle" style="background-color:#EFF3FB;font-family: Verdana; font-size: 10px ...
Using TypeScript to compile and run an Express server that simply serves an HTML file. However, encountering an error in the response under the network tab in Chrome for app.js: Uncaught SyntaxError: Unexpected token '<' Below is the server c ...
On this site , the following code is present: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <iframe style="position: absolute; top: 0; left: 0; height: 100%; width: 100%" src="blank.html"></iframe ...
What is the purpose of the post, ID, and other elements within the article tag? I expected the post_class to be defined in my CSS, but I cannot locate it. If I remove the entire code block from the <article>, my website layout breaks. However, remov ...
In my project, I am restricted to using only HTML5 and CSS3. Currently, I have a form that requires simulating the action of "sending form data". Upon clicking the submit button, the form should be hidden and a default div (#result) needs to be displayed. ...
I am looking to create an animation effect on a border, gradually revealing it like in this Codepen example. However, my specific requirements are: The previous line should not be removed, but rather shown along with the new border. The border color ...
I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...
Displayed below is a snippet of source code from an IONIC page dedicated to shapes and their information. Each shape on the page has two buttons associated with it: shape-properties-button and material-information-button. Is it possible to assign different ...
My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...
Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...
I'm currently working on a comment and like system similar to Facebook. However, I am struggling to select the specific div element! Here is a snippet of my current HTML: <div class='activoptions'><a href='#'>Like< ...
As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language. M ...
Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...
My webpage serves as a dynamic to-do list, allowing users to add an endless number of tasks of all types. As the list grows in size, the page height increases and a scrollbar appears. Positioned at the bottom right corner of the page is a fixed button that ...
I'm currently working on a thumbnail slider project. My goal is to display 5 thumbnails at a time, and allow users to move to the next or previous set of thumbnails by clicking on the corresponding buttons. I attempted to modify an existing slider tha ...
Comparing two scenarios: Scenario 1 is problem-free, but issues persist in scenario 2. Review the details below: Scenario 1: MasterPages: Main\MasterPages.master Css : Main\Theme\CSS\ Javascript : Main\Theme\Javascrip ...
I'm in the process of developing a responsive website and my goal is to keep all my divs centered at all times. However, I've encountered an issue where using the flex attribute in my container causes the bootstrap cards to go offscreen. Can any ...
I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...
Encountering an issue while trying to display two arrays containing channel information: List of channels List of subscriptions that users have opted for. channels = [ { "id": 1, "name": "arte", "service&q ...
I wanted to address a recurring issue that has been discussed in various posts, such as this one on Stack Overflow: Show a second dropdown based on previous dropdown selection Despite attempting numerous solutions suggested in those posts, I have not been ...