How can I shift the top line to the bottom of the text using CSS?

I am facing an issue with CSS or HTML where I need to move a line from the first circle to the second one, as shown in the image below. Here is the link to my JSfiddle version:

https://i.sstatic.net/Pn6rF.jpg

JSFiddle code:

https://jsfiddle.net/odzuwsdt/

HTML:

<section  id="intro" class="workhide">
  <div class="content_section with_border">
    <div  class="content"><span  class="label">Werk</span>
      <h1>
        Zo trots als een hond met zeven staarten. <br > Ben ik op mijn werk. Denk jij nu: 'Dat wil ik ook!'?<br > mail mij!
      </h1>
    </div>
  </div>
</section>

CSS:

.content_section.with_border:before {
    content: "";
    width: 10%;
    display: block;
    height: 2px;
    left: 0;
    top: 24px;
    position: absolute;
    background: #1d1b22;
    clear: both;
}

.content_section.with_border .label {
    position: relative;
    clear: both;
}

h1, h2 {
    font-weight: 800;
    font-size: 1.60714em;
    line-height: 1.24444em;
    margin: 0 0 .64286em;
}

.content_section.with_border .content {
    padding: 0 11%;
    clear: both;
}

.content_section .label {
    font-size: .5em;
    text-transform: uppercase;
    font-weight: 800;
}

Can anyone help me solve this issue?

htmlcss

Answer №1

Check out this functional code snippet along with explanations:

/* New addition */
.content_section.with_border {
  position: relative;
}

.content_section.with_border:before {
  content: "";
  width: 10%;
  display: block;
  height: 2px;
  left: 0;
  bottom: -4px; /* updated top to bottom, feel free to adjust value for position */
  position: absolute;
  background: #1d1b22;
  clear: both;
}

.content_section.with_border .label {
  position: relative;
  clear: both;
}

h1,
h2 {
  font-weight: 800;
  font-size: 1.60714em;
  line-height: 1.24444em;
  margin: 0 0 .64286em;
}

.content_section.with_border .content {
  padding: 0 11%;
  clear: both;
}

.content_section .label {
  font-size: .5em;
  text-transform: uppercase;
  font-weight: 800;
}
<section id="intro" class="workhide">
  <div class="content_section with_border">
    <div class="content"><span class="label">Werk</span>
      <h1>
        Feeling as proud as a peacock. <br> My work fills me with joy. Do you want the same feeling?<br> Email me!
      </h1>
    </div>
  </div>
</section>

I trust this explanation is useful!

Answer №2

To enhance the design, apply position:relative to the parent div and change top to bottom

.content_section.with_border{
  position: relative;
}
.content_section.with_border:before {
  content: "";
  width: 10%;
  display: block;
  height: 2px;
  left: 0;
  bottom: 8px;
  position: absolute;
  background: #1d1b22;
}

See it in action here: https://jsfiddle.net/odzuwsdt/2/

Answer №3

Consider updating your css code with the following changes.

.main_content {
  position: relative;
}

.main_content.with_border:before {
  content: "";
  width: 10%;
  display: block;
  height: 2px;
  left: 0;
  bottom: 0;
  position: absolute;
  background: #1d1b22;
}

.main_content.with_border .title {
  position: relative;
}

h1,
h2 {
  font-weight: 800;
  font-size: 1.60714em;
  line-height: 1.24444em;
  margin: 0 0 .64286em;
}

.main_content.with_border .content {
  padding: 0 11%;
}

.main_content .title {
  font-size: .5em;
  text-transform: uppercase;
  font-weight: 800;
}

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

Clicking on the initial link will in turn prompt clicks on the subsequent links

Can you please provide instructions on how to correctly simulate a click on the remaining links if a click is made on the first link? jQuery('a.one_num').click(function() { jQuery('a.two_num').click(); jQuery('a.three_num&ap ...

javascripthtmljquery

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...

cssreactjsmaterial-uijss

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

javascripthtmlnode.jsreactjsjson

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

css

Issues with Firefox's -moz-placeholder functionality were observed not being functional as

I'm having trouble styling this placeholder in Firefox 13.0.1 Here is the input field with a placeholder: <input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" /> This is the CSS associated with it: . ...

csshtmlfirefox

When using Angular, the onSelectionChange event is not triggered for angular mat-option components

I am working with a mat-form-field that includes both an input field and a mat-autocomplete feature with mat-options. The input field has a (blur) event triggered when it loses focus, while the mat-option has an (onSelectionChange) event triggered when an ...

htmlangularangular-material

Section with relative positioning has taken an unexpected position

I'm facing a rather basic issue with positioning a relative div on my webpage. My layout consists of an absolute header that is 100vh tall, containing a headline and caption. Below the header, I have two section elements, both set to a relative posit ...

htmlcsscss-positiondisplay

AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

Utilizing AngularJS ng-repeat for displaying a list of products and incorporating bootstrap col-md-2 to showcase 6 products in each row, I have included a condensed version of my code below: <!DOCTYPE html> <html lang="en"> <head> <ti ...

javascripthtmlcssangularjstwitter-bootstrap

The toast feature in Bootstrap 5 seems to be malfunctioning as it does not display properly despite the absence of any

Why isn't the Toast displaying in the code snippet below? I'm using bootstrap 5. I'm puzzled because there are no errors in the developer's tools. Any assistance would be greatly appreciated. <!DOCTYPE html> <html lang="en"& ...

javascripthtmljquerybootstrap-5toast

flexible design using flexbox with image overflow and responsive footer

I created a website and utilized flexbox for designing the layout. The page structure is quite simple, consisting of only 3 tags: <header> <section> <footer> [index.html] <html> <head> <link rel="stylesheet" type="t ...

htmlcssflexbox

The mobile view of the Bootstrap navigation bar is unresponsive and unable to be clicked when

Does anyone know how to fix an issue with a collapsed navbar on mobile? The navbar collapses properly, but nothing happens when the collapsed button is clicked. It works fine on desktop, but not on mobile. Any suggestions on how to resolve this problem? &l ...

htmlbootstrap-5

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

Aligning a div element horizontally

I'm having trouble aligning the div element with the .slider class horizontally. The margin: 0 auto; property doesn't seem to be working. Additionally, I would like to know how to make the slider image responsive. /* CSS Document */ .header { ...

htmlcss

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

Using jQuery .animate() leading to erratic input movements

I am currently utilizing jQuery's .animate() feature to create a smooth animation effect on the width of a <div> element when a child <input> is in focus. Nevertheless, I'm encountering an issue where the input field jumps up and down ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving Perfect Table Alignment with Bootstrap Framework

I have updated my static website to include a payment gateway with a custom Paypal button. However, I am facing an issue where the table containing the button is not aligning center on the support page like the rest of the content. Here's a snippet of ...

htmlbootstrap-4alignmenttext-align

The CSS class is mistakenly being applied to the entire page instead of just the specific div it was

Here is the HTML code I am working with: <!DOCTYPE html> <head> <title></title> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" /> <link rel="styl ...

htmlcss

Changing the direction of the cursor to move opposite of the mouse's input

I'm currently working on a unique webpage with an unconventional navigation method. The concept involves the cursor moving in the opposite direction of mouse movement input. To achieve this effect, I decided to hide the actual cursor and use JavaScri ...

javascripthtmlcssnavigationcursor

Incorporate a curved progress line into the progress bar

Currently, I am working on creating a customized progress bar: .create-progress-bar { padding: 0 !important; margin: 25px 0; display: flex; } .create-progress-bar li { display: flex; flex-direction: column; list-style-type: none ...

htmlcss