Design your website with CSS by incorporating hanging ::before labels that feature unique formatting

I am looking to create labels that designate specific groups of words. Here are the criteria:

  • The label should appear to the left of the word group
  • The words should be enclosed in lines, while the label should not
  • The words should be indented, while the label should not

Currently, I'm facing an issue where the formatting is incorrect. The left boundary and indentation are being applied to the text created by ::before. How can I resolve this problem?

div[role=s]::before {
  content: "s ";
}

div {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  padding-left: 1em;
}
<div role="s">
Peter and John
</div>
css

Answer №1

To position the label outside of the div using your current markup, you can use absolute positioning.

div[role=s]::before {
  content: "s ";
  position: absolute;
  right: 100%; top: 0;
  width: 1em;
}

div[role=s] {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  padding-left: 1em;
  position: relative;
  margin-left: 1em;
}
<div role="s">
Peter and John
</div>

Alternatively, if you are able to add a new element, you can place the border around the nested element and utilize flex properties on the parent to align them in a row.

div[role=s]::before {
  content: "s ";
}

div[role=s] {
  display: flex;
}

div[role=s] > div {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  padding-left: 1em;
  margin-left: .5em;
  flex: 1 0 0;
}
<div role="s">
  <div>Peter and John</div>
</div>

Answer №2

div[role=s]::before {
  content: "s";
  position: absolute;
  left: -15px;
}

div {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;
  padding-left: 1em;
  margin-left: 1em;
  position: relative;
}
<div role="s">
  Peter and John
</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

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

Was the Gideon Sundback Google doodle created using JavaScript? I attempted to follow along in Firebug, but I couldn't quite grasp its implementation details. Any ideas on how it was possibly implemented? Any insights on the potential techniques use ...

javascriptcssgoogle-doodle

Create a customized HTML popup featuring various packages

I am struggling to create an HTML popup within a React component due to some errors Here is the code snippet: <div> <button class="toggle">Button</button> <div id="link-box"> <ul> ...

htmlcssreactjs

How to maintain HTML list items in a single line while overlaying text

I'm seeking assistance with understanding how to solve a particular issue. I have multiple list elements with varying lengths of text content, each flanked by small images/icons on either side. Below is an example of the HTML structure: .truncate ...

htmlcss

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

How do I modify the sidebar width with CSS code?

I am trying to adjust the width of the right sidebar on my website. The current layout leaves too much empty space on the right side and makes it appear crowded next to the main content and images in the center. Despite exploring various solutions provide ...

csswordpresswoocommercesidebar

"Enhance Your Website with Slider Swipe Effects using CSS3 and

After scouring the internet for various types of sliders, including swipe sliders, I am interested in creating a responsive swipe slider specifically for mobile phones. This would be a full page swipe slider where users can swipe left and right seamlessly. ...

javascriptphphtmlcss

Dawn Break Alarm Timepiece - Online Platform

My buddy recently purchased a "sunrise alarm clock" that gradually brightens to mimic a sunrise and make waking up easier. I had the thought of replicating this effect with my laptop, but I've been facing issues with getting the JavaScript time funct ...

javascripthtmlcssweb

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

htmlcss

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

cssresponsive-designfont-size

What is the best way to adjust my carousel so that it occupies just 60% of the screen, allowing the panels beneath it to utilize the remaining space

How can I adjust the size of the carousel to occupy only 60% of the screen without the need for scrolling, allowing the panels directly below to fill the remaining 40%? The images within the carousel should resize accordingly based on the desktop screen si ...

htmlcsstwitter-bootstrapbootstrap-4

CSS: Eliminate unnecessary space at the top by implementing a margin and padding reset

I am puzzled by the presence of approximately 10px of whitespace at the top of my HTML file. Despite setting margin and padding to 0 in the "body" section of my CSS, the whitespace persists. Any suggestions? Thank you! Update: I discovered that removing t ...

csshtml

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

javascriptjquerycss

Arranging 2 divs side by side

As a beginner, I'm struggling to find the answer because I have no idea what search terms to use. Now, I have a form <form action="#" method="POST"> <div id="labels"> <label>CMS System</label><p> ...

htmlcss

Currently working on enhancing the responsiveness of the login form

I am encountering difficulties while trying to make the page responsive. I've checked my basic code, but something seems off. Could you please take a look at the plnkr link below and give me some feedback on where I might have gone wrong? Here's ...

htmlcssbootstrap-4

Discover the process for simulating a browser zoom using JavaScript

Is there a way to control the browser's zoom level using JavaScript? I decided to create my own solution to override the default browser zoom behavior. The current code works fine if starting from a scale of 1, but I'm facing an issue when alrea ...

javascripthtmlcsszoomingpinchzoom

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

Techniques for breaking down large CSS files into modules and combining multiple smaller CSS files

My website's CSS file is currently massive, containing site-wide selectors in a file named Mondo.css. While this setup has been effective for ensuring users only need to download the file once, I've recently developed a widget that requires its o ...

cssbrowserlessaggregation

Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged. I've done my research and tried various solutions like: - Setting WebView.scalesPageToFit = true - Applying default con ...

ioscssswiftuiwebview

Ways to customize the background color of selected items in ion-list on Ionic

I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this? index.html <ion-list> <ion-item ng-repeat="item in familleItems"> <div ng- ...

htmlcsscordovaionic-framework