Issue with displaying HTML content using Pseudo-element

* {
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper {
    padding: 2rem;
}

.text--bigtitle {
    text-transform: uppercase;
    font-size: 2rem;
}

.border--short {
    position: relative;
}

.border--short::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 40%;
    bottom: 0;
    left: 50%;
    color: red;
    margin-left: -20%;
}
<div class="wrapper">
    <p class="border--short text--bigtitle">Short Border</p>
</div>

I am attempting to create a short bottom border specifically under a title within an html element by utilizing CSS.

Despite my efforts using the 'position:absolute' property and adjusting the width of the ::after pseudo-element, I cannot seem to get the desired result of displaying a short bottom border only. Here is the snippet of my code:

If anyone has any suggestions or solutions to this issue, it would be greatly appreciated. Thank you in advance.

htmlcsspositionpseudo-element

Answer №1

modify the color property to the background-color property within the selector .border--short::after. The color property is typically used to change the font color, while the background-color property is specifically for changing the background color. Thank you.

* {
  font-size: 14px;
  box-sizing: border-box;
}

.wrapper {
  padding: 2rem;
}

.text--bigtitle {
  text-transform: uppercase;
  font-size: 2rem;
}

.border--short {
  position: relative;
}

.border--short::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 40%;
  bottom: 0;
  left: 50%;
  background-color: red;
  margin-left: -20%;
}
<div class="wrapper">
  <p class="border--short text--bigtitle">Short Border</p>
</div>

Answer №2

I trust this meets your requirements.

* {
    font-size: 14px;
    box-sizing: border-box;
}

.container {
    padding: 2rem;
}

.title--large {
    text-transform: uppercase;
    font-size: 2rem;
}

.border--brief {
    position: relative;
    padding-bottom: 10px;
}

.border--brief::after {
        content: "";
    display: block;
    height: 2px;
    width: 40%;
    background-color: blue;
}
<div class="container">
    <p class="border--brief title--large">Brief Border</p>
</div>

Answer №3

Give this a try, it should work smoothly. If you prefer not to have the text centered, simply delete text-align: center from the .wrapper class.

* {
  font-size: 14px;
  box-sizing: border-box;
}

.wrapper {
  padding: 2rem;
  text-align: center;
}

.text--bigtitle {
  text-transform: uppercase;
  font-size: 2rem;
  position: relative;
  display: inline-block;
}

.text--bigtitle::after {
  content: "";
  display: block;
  height: 2px;
  width: 40%;
  background-color: red;
  margin: auto;
}
<div class="wrapper">
  <p class="text--bigtitle">Short Border</p>
</div>

Thank You...

Answer №4

* {
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper {
    padding: 2rem;
}

.text--bigtitle {
    text-transform: uppercase;
    font-size: 2rem;
}

.border--short {
    position: relative;
    display: inline-block;
}

.border--short::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 40%;
    bottom: 0px;
    left: 30%; /* 50 % minus half the width */
    background-color: red;
}
<div class="wrapper">
    <p class="border--short text--bigtitle">Short Border</p>
</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 to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

jqueryhtmlcsssubmenu

Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

My Rails website features various CSS animation effects and JavaScript elements. While these transitions function smoothly on my local environment, they do not work properly on Heroku. Examining the Heroku logs: 2013-09-17T17:13:36.081145+00:00 app[web.1 ...

javascriptcssruby-on-railsheroku

Attempting to superimpose elements using CSS proves to be highly unsuccessful in Internet Explorer

I am aiming for a button with an outlined description box placed down and to the right, partially behind the button. To see how it should appear, open FF 4: http://jsfiddle.net/kZFRN/16/ In IE (8), the button appears to the right of the description box, ...

cssfirefoxinternet-explorer-8

Trouble linking CSS file with Plotly Dash interface

Transitioning from plotly to dash, I am looking to incorporate a css file to enhance the appearance of my dashboard. The structure consists of app.py and index.py in the main directory, with an additional style.css file located in the /assets folder. Desp ...

pythoncssplotly-dash

PDF links not loading properly in Chrome's PDF Viewer, causing them to become stuck

While working on a website we are developing, we encountered an issue with PDF download links getting stuck while loading in Chrome's built-in PDF viewer. The links work fine in other browsers and can be triggered for download. Right-clicking and sele ...

htmldjangogoogle-chromeanchorhttpresponse

The background fails to adapt to the mobile screen

My background doesn't scale with the window size. It only adjusts when I make the window larger, not smaller. The background-size: cover property doesn't solve the resizing issue. Full Screen Regular Size: https://i.sstatic.net/zDjpk.png Mobi ...

phphtmlcssresponsive-designbackground-image

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

javascriptjquerycsstabsslider

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

htmlcssapixhtmlnavigation

Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project. Here is the CSS code I am using: /*overriding bootstrap*/ .tooltip-inner { border: 1px solid #0ad; background: #FFFF ...

htmlcsstwitter-bootstraptwitter-bootstrap-tooltip

After clicking, an created modal is displayed, then disappears on its own

After creating 2 Modals, I encountered an issue where the second modal with the class "category-modal" reverts back to display none when I click the "+" sign on the form. The first modal, with the class "modal," displays correctly when the add button is cl ...

javascripthtmlcss

Issues creating bar graphs using HTML

I am currently working on creating a script that can display statistics from a database in the form of a bar chart. My idea is to have two colored bars stacked on top of each other, representing different values simultaneously - for example, the number of ...

phphtmlcharts

The Act of Including the Doctype Ruins the Design

I've been working on a tab menu without adding the doctype statement. It seems to be functioning perfectly from my perspective, but as soon as I include the or any other type of Doctype, the layout gets completely messed up. Here are three images ill ...

csshtml

consistent character spacing for a custom font upload

Developing an application that necessitates counting up and opting for the font Orbitron due to its square appearance. The issue arises as, unlike the default chrome font, the width of this font's digits is not consistent, causing the count character ...

javascriptcssstringcounterletter-spacing

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

In my current project, I am fetching a random document from a MongoDB Collection and attempting to showcase all the fields of that document in HTML. Although I can successfully retrieve a random document, the issue arises when trying to display its fields ...

javascripthtmlmongodbmeteor

Detecting the physical screen size based on the user agent in PHP and JavaScript

Is it possible to accurately detect the screen size of mobile browsers using both javascript and php? Given how mobile devices come in all shapes and sizes these days, relying solely on pixels may not be enough. I'm looking for a method that can speci ...

phpjavascriptcssdevicescreen-size

Unable to retrieve HTML element using Python's Selenium

Whenever I try to access a specific website using Selenium, a pesky pop-up appears and I can't seem to locate the close button to dismiss it. from selenium import webdriver from time import sleep from selenium.webdriver.common.keys import Keys import ...

pythonhtmlselenium-webdriverwebelement

css displaying inconsistently on Mi Browser mobile view

Everything looks great in Chrome (mobile), but for some reason when I test it out on Mi Browser, the CSS isn't displaying correctly. I'm working with Next.js and here's a snippet from my head tag: <Head> <meta charSet="UTF-8&q ...

htmlcssnext.jsmobile-browserxiaomi

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Issue with border-color in CSS on Chrome tables

Here is a table style I have defined for selected elements: tr[selected] { background: #FFF; border-color: #000000; color: #000000; } To apply this style, I use JavaScript: $this.unbind().change(function () { element = $(this).parent ...

javascriptjquerycssgoogle-chrome

Using Ajax to update a webpage by invoking a PDO function within a PHP class

Looking for assistance with filtering a list of files using a dropdown box and categories. I have a PHP class ready to handle the SQL query and results, but I'm eager to implement this through AJAX to avoid page refresh. Feeling stuck and seeking gui ...

phpjqueryhtmlajaxpdo