Prevent the line break from going beneath the ::before pseudo element

p::before {
  content: "1. ";
}

p {
  width: 200px;
}
<p>This is an example of a long text that requires a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Is there a way to adjust the starting position of line breaks in order to prevent text from displaying under the pseudo element?

javascripthtmlcss

Answer №1

Resolve the issue with Flexbox.

p::before {
  content: "1. ";
}

p {
  width: 200px;
  display: flex;
}
<p>The provided text is lengthy and requires a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Alternatively, utilize CSS-Tables

p::before {
  content: "1. ";
  display: table-cell;
  padding:.25em;
}

p {
  width: 200px;
  display: table-row;
}

span {
  color: red
}
<p>The text is extensive and necessitates a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span>INTERCEDING SPAN</span> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer №2

To achieve the desired layout, apply either display: flex or display: inline-flex to your p element. Nevertheless, it is recommended to utilize standard ul and li elements instead of pseudo elements for this specific purpose.

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 can I apply styles to table cells based on their data type using HTML and CSS?

On a webpage, I have a standard table/th/tr/td setup that presents tabular information. The columns can be rearranged: product|price|date price|product|date date|product|price ... and so forth. However, the original order remains consistent for each disp ...

htmlcss

Image Switching Hover Bug

HTML: <div id="logo"></div> <div id="coming-soon"></div> JavaScript: $(document).ready(function(){ $("#logo").hover( function(){ $("#logo").fadeTo(300, 0); $("#coming-soon").fadeTo(300, 1.0 ...

javascriptjqueryhover

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Arrange a div within a list element to create a grid-like structure

My current structure is as follows: <ul class="wrap-accordionblk"> <li class="accordionblk-item"> <div class="accordionblk-header"> <div class="row-fluid"> <div class="infoblk"> <label>SESSION ID ...

htmlcssalignment

Having trouble deciding between JSON, XML, or using a database?

As I work on developing an app that involves sending an id and receiving a JSON node from PHP, I am considering the best approach for storing my data. Should I keep it as a static PHP array as shown in the code below, or should I save the data to an exte ...

phpjavascriptjquerydatabasejson

Exploring the benefits of refactoring jQuery promises in use cases

I've been thinking about how to optimize this pseudo-code: function foo() { if (condition) { return somethingReturningPromise().then(function (data) { doSomethingOnSuccess(data); return mainFunctionReturningPromise(); // he ...

javascriptjquerypromiserefactoring

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

htmlangularjsangularjs-ng-repeat

Ways to display jQuery values as HTML text

Trying to concatenate the HTML text with the values of item.certificate_name has been a challenge for me. I've experimented with various methods, but none of them seem to work. The specific line I'm referring to is where I wrote . I have alread ...

javascriptjqueryhtmlweb

Using Express-session in the Internet Explorer browser

When configuring the express-session plugin, I follow this setup: var express = require('express'), session = require('express-session'), uuid = require('node-uuid'); var expiration_day = new Date('9/15/2015&apo ...

javascriptnode.jssessioncookiesexpress

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

javascripthtmlaudiowavaudiobuffer

You are able to use a null type as an index in angular.ts(2538) error message occurred

onClick() { let obj = { fName: "ali", LName: "sarabi", age: "19", } let fieldName = prompt("field"); alert(obj[fieldName]); } I encountered an issue with the code above where alert(obj[fieldName] ...

javascriptangulartypescript

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

I need to set up a text field and submit button that will redirect users based on their input: index.html: If the user inputs "123" in the text box and clicks submit, they should be redirected to john.html page. AND If the user inputs "456" and clicks s ...

javascripthtmlformsinputtextbox

Increasing the value of a TypeScript variable using ngFor in an HTML template can enhance its usefulness

Can you dynamically increase a variable declared in your TypeScript file for each element generated by an ngFor loop in your HTML file? <tbody> <tr *ngFor="let item of invoiceItems"> <td>{{item.ItemName}}</td> <td>{ ...

htmlangulartypescriptngfor

Converting Vue HTML to PDF without relying on html2canvas functionality

My current challenge involves creating a PDF file from either HTML or Vue component. I have experimented with various libraries such as jsPDF, html2pdf, and vue-html2pdf, but it seems like they all rely on html2canvas, causing the UI to freeze for a few ...

javascriptreactjsvue.jspdfvuejs2

Having trouble with loading multiple HTML files simultaneously in two webviews causing flickering?

With a total of 135 screens in my application, I understand that it may seem like an excessive number. However, due to project requirements, all screens need to be implemented as HTML files, stored in the assets folder, and loaded into two webviews with an ...

androidhtmlwebviewtransitionassets

Send the parameter to the compile method within the directive

I am currently working on creating a generic field and utilizing a directive for it. In my HTML code, I have defined the following: <div def-field="name"></div> <div def-field="surname"></div> <div def-field="children"></d ...

javascriptangularjs

What could be causing the child of an ES6 imported object to return as undefined?

Here is the code snippet I am working with: import * as _routes from '../../routes' console.log('parent:', _routes) console.log('child:', _routes.breadcrumb) This code produces the following output: https://i.stack.imgur.co ...

javascriptecmascript-6importmodule

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div. When you take a look at my example, everything will become clear. <div class="drawer"> <p>Drawer</p> & ...

htmlcss

Tips for implementing mixins in a Nuxt.js application using the nuxt-property-decorator package

Recently, I worked on a project where I utilized Nuxt.js with TypeScript as the language. In addition, I incorporated nuxt-property-decorator. I'm currently trying to grasp the concept of the 'mixins' property in the code snippet below: mi ...

javascripttypescriptvue.jsnuxt.jsmixins