Organizing content with divs in HTML/CSS

I've incorporated a theme in my designs where there is a blue bar beneath the text, like shown in the images below

https://i.sstatic.net/TuVGd.png

https://i.sstatic.net/CCJRo.png

Currently, I've been structuring my HTML for these bars in the following way:

 <div class="Header">
      <h4>My Website</h4>
      <div class="YBlock2"></div>
 </div>

The CSS class for this structure is defined as:

.YBlock2{
background-color:blue;
width: 50px;
height: 10px;
}

However, I'm questioning whether this is the most effective method. While it looks great on my computer, I'm unsure if it's the best practice for ensuring the site's compatibility with various screen sizes and devices, or for overall optimization.

htmlcsstwitter-bootstrap

Answer №1

Utilize pseudo-elements like :after.

h4:after {
  content: '';
  display: block;
  margin-top: 3px;
  width: 50px;
  height: 10px;
  background-color: blue;
}
<h4>My website</h4>

Answer №2

Using a pseudo element would be the most efficient solution, but for the sake of creativity, you could try this alternative approach.

h1 {
  max-width: 50px;
  border-bottom: 3px solid blue;
  overflow-x: visible;
  white-space: nowrap;
}
<h1>Apples are so crunchy</h1>
<p>And grapes are sweet</p>

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

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

javascriptjqueryhtmlcssajax

What is the method for placing text underneath your background image?

click here for image I am trying to set a full viewport background image by applying it to the body tag. Currently, I have successfully achieved this with the following CSS code: body { background-image: url(/picture.jpg); } However, I also want to displ ...

csshtmlbootstrap-4

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flickr Feed</title> <link href="../_css/site.css" rel="stylesheet"> <link rel="stylesheet" type= ...

jqueryhtmljson

Why is the defaultDate property not functioning properly in Material-UI's <DatePicker/> component with ReactJS?

I recently implemented the <DatePicker/> component from Material-UI ( http://www.material-ui.com/#/components/date-picker ) in my project. I encountered an issue while trying to set the defaultDate property to the current date on my computer, as it r ...

javascriptcssreactjsdatepickermaterial-ui

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

cssangularprimeng

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

htmlcss

Utilizing CSS flexbox to occupy the remaining vertical space

I'm facing a scenario where I have three elements: div with content 1, div with content 2, and an image that spans 100% width (with variable height). My goal is to align div 1 at the top, the image at the bottom, and fill the remaining space with cont ...

htmlcssflexbox

Creating a custom HTML5 canvas with images from a JSON array

I am currently working on a project to develop a unique slideshow feature by hosting images in an external JSON array and then loading them onto an HTML page. The next step is to insert these images onto an HTML5 canvas. While I have successfully loaded a ...

javascripthtmljsoncanvashtml5-canvas

Unable to retrieve element using getElementById with dynamically assigned id

After researching on Google and browsing through various Stack Overflow questions (such as this & this), I have not been able to find a solution. I am currently working on validating dynamically generated rows in a table. The loop and alert functions a ...

javascriptphpjqueryhtmlvalidation

Utilize Django to dynamically generate and display notifications with accurate rendering

Last week, I posted a question on Stack Overflow but unfortunately, I have yet to receive an answer. Upon further reflection, I realized that the root of the problem lies elsewhere. My current dilemma involves creating notifications for users and then disp ...

pythonhtmldjangourlnotifications

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

csswindowsmacos

Creating a unique bullet style using CSS

I've got a collection of student links that take users to their profiles, and I want to replace the usual circular bullet points with smiley faces. Each picture is 14x14 pixels in size. How can I use CSS to achieve this effect for the bullets? ul { ...

htmlcss

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...

jqueryhtmlcsscolorsselenium-webdriver

Heroku App Breaks Down - Fails to Render Static HTML Content (Express Server)

Despite my best efforts, I keep encountering this persistent error on Heroku whenever I attempt to serve a static HTML page with some basic JS, images, and CSS. I diligently followed all the advice from SO, made adjustments to index.js, restructured files, ...

htmlnode.jsexpressheroku

Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container. .container { display: flex; width: 150px; } .item { flex: 1 1 50px; border: 1px solid blue; } <div class="container"> <div class="item ...

htmlcsslayoutflexbox

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

javascripthtmlapache-flex

Adjust button size on various devices with boostrap classes

I am looking to make my large button (btn-lg) smaller on small devices. How can I achieve this? <div class="col-4 col-md-2 col-lg-1 mt-md-5"> <a href="{{ url_for('remove_favourite', trail_id=fav._id ) }}" class=" ...

twitter-bootstrapbootstrap-4bootstrap-5

Guidelines for pinpointing local directories

Recently, I obtained a source code for a website navigation that includes a unique set of icons known as "Typicon." The HTML in the source code contains the following: <link rel="stylesheet" type="text/css" href="css/component.css" /> Within the C ...

csshtmlfontsicons