Creative ways to position and underline text using CSS

I'm having difficulty with positioning the text and extending the underline to the edge of the screen in order to create a specific visual effect.

.header {
  height: 550px;
  width: 100%;
  background-color: #1F2041;
  position: relative;
}
    
.header h1, .header h2{
  color: white;
  font-size: 52px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1.5px solid currentColor;
  line-height: 0.7;
  position: absolute;
  top: 210px;
}
    
.header p {
  margin-top: 40px;
  color: white;
}
<div class="header">
  <h2>About</h2>
  <h2>Nikola</h2>
  <p>Simple. Modern. Yours.</p>
</div>

Here's the desired outcome I'm aiming for

htmlcsstextunderline

Answer №1

Consider implementing a solution like this using the float and clear properties. You can adjust the size of the 400px to your liking. It's worth mentioning that while float may not be the ideal approach, employing solely margins might be preferable. Nonetheless, try to refrain from utilizing position: absolute as it can lead to overlapping elements.

.header {
    height: 550px;
    width: 100%;
    background-color: #1F2041;
    text-align: right;
}
.header * {
    float: right;
    clear: right;
    width: 400px;
    text-align: left;
    color: white;
    margin: 0 0 20px;
}

.header h1, .header h2{
    color: white;
    font-size: 52px;
    text-transform: uppercase;
    border-bottom: 1.5px solid currentColor;
}
<div class="header">
    <h2>About</h2>
    <h2>Nikola</h2>
    <p>Simple. Modern. Yours.</p>
</div>

Answer №2

Perhaps you require something along these lines? By using an absolute positioning, you have the ability to adjust its location within the parent div.

You establish a fixed height, so by adding 150px top and bottom margins, you should achieve the desired layout

Keep in mind that when using position:absolute; it is important that the position is relative to the parent div with a position:relative

.header {
  height: 550px;
  width: 100%;
  background-color: #1F2041;
  position: relative;
}

.content-div{
  position:absolute;
  margin: 150px 0 150px auto;
  width: 250px;
  right: 0;
}

.header h1, .header h2{
  color: white;
  font-size: 52px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1.5px solid currentColor;
  line-height: 0.7;
}
    
.header p {
  margin-top: 40px;
  color: white;
}
<div class="header">
  <div class="content-div">
    <h2>About</h2>
    <h2>Nikola</h2>
    <p>Simple. Modern. Yours.</p>
  </div>
</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 come my Calendar is not showing up on the browser?

I came across a helpful guide on setting up a Calendar in HTML using JavaScript You can find it here: Unfortunately, the code I tried to use based on that guide isn't functioning as expected. <div class="row"> <div class="col-lg-4 text ...

javascriptjqueryhtmlcalendar

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

csswordpressadvanced-custom-fields

What steps can be taken to resolve this issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

font-sizecss

Issues with Monospace Google Fonts on JSFiddle are preventing them from displaying correctly

It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...

cssjsfiddlegoogle-font-api

What is the process for adjusting the color of a mat-divider?

Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...

htmlcssangularsassangular-material

Table that can be scrolled through

Back in 2005, Stu Nichols shared a technique for creating a fixed header with scrolling rows in a table on this site. I'm curious if there are any newer methods or improvements to achieve the same effect, or is Stu's approach from 2005 still con ...

jquerycss

What is the method for extracting text from a dd attribute without a name using Python and Selenium?

I am working on a webpage that includes a price listed in a dd value. Here is the snippet of code I am dealing with: <dd itemprop="youSave" class="saleprice pricingSummary-priceList-value" style="width: 50%; height: 20px; text-align: left; padding-le ...

pythonhtmlseleniumweb-scraping

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

javascriptioscssuiwebview

Adjust the CSS extension within the about:config settings of Firefox

I've been using the Zotero extension and I want to adjust how TinyMCE handles paragraph spacing. I'm looking to customize the CSS in extensions.zotero.note.css by adding specific CSS rules. The reason I want to make these changes is because I fe ...

htmlcssfirefoxtinymce

Adding options to a select element using JavaScript dynamically

Is there a way to create a dynamic select list for year values using JavaScript? <form action="something"> some other fields <select id="year"> </select> </form> ...

javascripthtml

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

In the midst of developing an angular 2 project, I am currently working on integrating theme settings. Within my project, I have crafted three distinct component.scss files: red.component.scss, yellow.component.scss, and blue.component.scss. My goal is t ...

cssangularangular2-templatescss-lint

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

javascripthtmltabs

Issues arise when dealing with a CSS and HTML accordion

I decided to create a CSS and HTML collapsing menu system, also known as an accordion. I found a tutorial on how to do it here. However, I had to make some modifications because I wanted to include images in the 'sections' later on. Instead of us ...

htmlcssaccordion

What causes the values to constantly change whenever I insert an element into the array?

When I add an element, it automatically replaces all the others. This issue only occurs when I insert the entire object; if I insert a typical element such as an integer or a string, it works without any problems. <body> <div id="app&quo ...

htmlvue.js

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

Tips for duplicating specific div elements

Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...

javascriptjqueryhtmljquery-uiclone

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

javascriptpythoncssdjangodata-sharing

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

In Internet Explorer 7, the combination of having a hasLayout property along with setting the position to relative,

Issue: Encountering a challenge in IE7 with a div containing a gradient and a flyout menu on hover. Although it may seem simple, applying position:relative to the container for accurate menu positioning conflicts with the filter/hasLayout combination. Ch ...

cssinternet-explorer-7