Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gaps.

Even after using Inspect Element, I can't seem to pinpoint the cause of the spacing problem.

I've experimented with adjusting the line-height, but so far, I haven't found a solution that doesn't drastically impact the spacing.

pre {
    counter-reset: linenum;
    font-family: "DejaVu Sans Mono";
}

pre code {
    counter-increment: linenum;
}

pre code::before {
    content: counter(linenum);
    display: inline-block;
    width: 3em;
    text-align: right;
    padding-right: 0.5em;
    margin-right: 0.5em;
    color: #888;
    border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

cssborderline-numberscss-counter

Answer №1

The problem stems from the font-family defined in the pre element. A simple solution would be to remove the font definition, reverting back to the default monospace

pre {
  counter-reset: linenum;
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

If keeping the custom font is essential, there are several ways to achieve your desired outcome:

  • Apply display: grid to the pre element

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  display: grid;
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

  • Use display: flex and flex-direction: column on the pre element

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  display: flex;
  flex-direction: column
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

  • Adjust display: table-row for the code symbol inside the pre element

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  /* maintaining consistency with table-row within child elements */
  display: table
}

pre code {
  counter-increment: linenum;
  display: table-row
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

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

Steps for rearranging the order of CSS grid layout

Could you assist me in implementing a grid layout that fulfills these specific criteria? I'm unsure of how to proceed, so any guidance would be greatly appreciated. https://i.sstatic.net/vBtXc.png When there are more than 9 items, the current layout ...

javascripthtmlcssvue.js

Styling elements with pseudo-classes when a horizontal scroll bar is activated

I have been experimenting with CSS pseudo-classes, specifically the before and after classes. While I have had no issues with the before class, I am running into a horizontal scroll problem when using the after class. I want to avoid using overflow: hidde ...

htmlcss

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

htmlcssmargin

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

csslayoutvisual-studio-code

Tips for securing a navbar in material ui

https://i.stack.imgur.com/CYfmQ.png In my current React project, I am facing an issue with aligning components within the Material-UI AppBar Component. My aim is to achieve a seamless and perfectly straight alignment for three key elements: a logo image, ...

javascriptcssreactjsmaterial-ui

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

javascripthtmlcssbootstrap-4bootstrap-modal

Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...

cssangularprinting

Why is the video background not taking up the entire width of the div element?

I've recently integrated the jquery.videoBG plugin into my project to add a video background. Here's the HTML code: <div id="div_demo"> <div class="videoBG"> <video autoplay="" src="media/snow.mp4" style="position: abso ...

jqueryhtmlcssbackgroundhtml5-video

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

jquerycssangularjstimepicker

Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...

javascripthtmlcssthree.js

Creating a JavaFX label with a border radius of 20

I need help with creating rounded edges for two labels in my interface. I want the first label (Hello) to have rounded edges on the top left and top right, and the dummy label to have rounded edges on the bottom right and bottom left. I've attempted ...

javacssjavafxlabelcornerradius

Ways to customize label appearance within a TextField using the createTheme function

I attempted to modify the margin of a label using em/rem units instead of px (refer to the image attached to this question), but I am unsure where to apply the styles for proper structuring. I have checked the MUI documentation but couldn't find infor ...

cssreactjsmaterial-ui

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

javascripthtmlcss

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

Properly aligning sub-divs within a parent div using CSS

I'm facing a problem with my CSS styling that I need help with. Here is the screenshot of the issue I am trying to center align the inputs, each placed in its own div, within my form. Below is the HTML markup for the form: HTML Markup Code CSS st ...

htmlcssalignmentstylesheetmarkup

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Tips for enhancing contrast in MUI dark theme modals

Currently, I am implementing MUI dark mode for my Next.js application. While the MUI modal functions perfectly in light mode, I am struggling with visibility issues when using it in dark mode. The contrast is not strong enough, making it difficult to disti ...

javascriptcssreactjsmaterial-ui

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

htmlcss

Aligning a div within another div and organizing its elements

Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the ...

htmlcss