What is the best way to add a line next to a specific word in a

For my report, I need to create multiple lines with automated dashes without having to use the SHIFT plus underscore keyboard shortcut. I searched for a solution but couldn't find anything that addressed my specific issue.

I envision something like this format:

Line 1: _____________

Line 2: _____________

Line 3: _____________

Line 4: _____________

I attempted various approaches using the <hr> tag, but none of them produced the desired result.

<p>Line 1: <hr align="right" width="200"></p>

<p>Line 2: <hr align="right" width="200"></p>

<p>Line 3: <hr align="right" width="200"></p>

<p>Line 4: <hr align="right" width="200"></p>

The output showed that the line extended too far to the right and did not align neatly with the text.

Is there a way to bring the line closer to the words, similar to the desired model?

htmlcss

Answer №1

To achieve this effect using CSS, you can utilize the ::after pseudo-element and adjust its styling to include a bottom border and use margin-left to position it to the right of the text.

p::after {
 content: ' ';
 width: 200px;
 border-bottom: solid 1px #333;
 display: block;
 margin-left: 50px
}
<p>Line 1:</p>

<p>Line 2:</p>

<p>Line 3:</p>

<p>Line 4:</p>

Answer №2

Instead of using the :after pseudo-element, you have the option to achieve a similar effect in the following way:

span {display: inline-block; vertical-align: bottom; width: 200px; border-bottom: 1px solid black;}
<p>Line 1<span></span></p>
<p>Line 2<span></span></p>
<p>Line 3<span></span></p>
<p>Line 4<span></span></p>

Answer №3

Are you looking for this exact setup? 

<div style="display:flex;">
<div><p>title</p></div>
<div style="width:30px;border-bottom: solid; height:35px;"></div>
</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

What could be the reason for the <div> style on the webpage not changing?

I'm currently working on a Django project where I've encountered a challenge. I have div containers with dynamic IDs, where the ID is fetched from the database and automatically injected into the HTML. Here's an example of how the dynamic I ...

javascripthtmldjango

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

Our mobile application is built with cordova [phonegap] and we are looking to implement offline saving of results into the cache memory. The results are fetched from a PHP server and displayed in a webview using ajax and javascript. I have tried using loc ...

jqueryajaxhtmlcordovalocal-storage

Using R programming language to download PDF files from a website through web scraping

Looking for assistance in R coding to automatically download all the PDFs linked on this URL: . The goal is to save these PDFs into a designated folder. I've attempted the following script with guidance from , however, it's resulting in errors: l ...

htmlrjsonurlweb-scraping

Exploring a website's HTML structure with Beautiful Soup in Python to pinpoint and extract certain tags

Here is the HTML code for reference: https://i.sstatic.net/Bs2DW.png I am attempting to extract specific information using Python code from the tags following "product-card__title" and "product-card__price". In this case, I need it to return the name and ...

pythonhtmlbeautifulsoup

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Can you provide any instances of CSS 3D Transforms being utilized in real-world projects besides and ? ...

csscss-transforms

Storing HTML in a Database

I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...

phphtml

What is the best way to arrange two divs inside a main div so they remain fixed in place at all times?

Struggling with aligning two smaller divs within a main wrapper for my website. Despite confining them to the main div, they don't stay fixed or aligned properly. How can this issue persist even when contained within a main div? I've attempted s ...

htmlcssalignmentwrapper

How can I code a div to automatically scroll to the top of the page?

I'm attempting to implement something similar in WordPress - I want a div containing an advertisement to initially start 300px down the page, then scroll up with the page until it reaches the top, and finally stay there if the user continues to scroll ...

javascriptjquerycsswordpress

CSS: Deciphering the Hidden Message in this Code Snippet!

Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...

css

Displaying WordPress plugin queries in a linked file

I have been working on developing a custom WordPress plugin that involves querying a database based on user input and then displaying the results in an HTML file with links. While I have managed to successfully display the HTML page, I am facing an issue w ...

phphtmlsqlwordpress

How to target and append individual table cells to a particular table row using JQuery

Here is a snippet of code to consider: <tbody> <tr class="wsui-table-row-odd"> <td>IamaTextFieldBox</td> <td class="im-label-required">Label required</td> </tr> <tr class="wsui-table-row ...

jqueryhtml

Placing three div elements within a container, one of which has a height set to auto

I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as the container div. <div id="container ...

htmlcss

Placing a div within a 960 grid system can sometimes result in unexpected spacing

Testing on various browsers: Chrome, IE, Firefox. I'm facing an issue where the BusinessNav ID keeps getting pushed over 3 columns. Desired page layout can be found here I could definitely hack this code to adjust the positioning. However, with so m ...

htmlcsshtml5boilerplate

How can I attach an event listener to each row in a table that is dynamically generated?

I am currently working on a table that is being populated using data from a JSON file. The number of entries in the JSON file can vary, resulting in different lengths for the table rows. Each row includes a bootstrap dropdown button with links for actions ...

javascriptjqueryhtmlbootstrap-4

Having issues with jQuery when trying to select only a single checkbox?

I have created a table with four rows and eight columns, each containing a checkbox. My goal is to allow only one checkbox to be checked per row. I am attempting to achieve this using jQuery. While it works in jsfiddle, I am experiencing difficulties in ge ...

javascriptjqueryhtmlcheckbox

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...

javascriptjqueryhtmllocal-storage

Show a picture upon hovering the button

Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...

javascriptjquerycss

The alignment of the text seem to be malfunctioning

The text-align:center property isn't working as expected. Can someone please assist me in figuring out why it's not functioning correctly? Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title>Wheat and ...

htmlcss

I have a slight confusion when it comes to using HTML frames

Currently, I am in the process of creating a static webpage for an online bookshop. The layout is divided into three frames: top left, and right, each serving a specific purpose. The top frame contains the title, the left frame displays all available boo ...

html