Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", and "Aulas".

In addition, I am utilizing Bootstrap 4.

Desired outcome:

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

Current status:

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

   <section class="bg-light" id="portfolio" style="background-color: #ffffff;">
  <div class="container-fluid">
    <div class="row text-center">
      <div class="col-sm-3">
        <p class="font-square2" style="border-top: 5px yellow solid;">
        NOSSOS <br> &nbsp;&nbsp;NÚMEROS</p>
      </div>
      <div class="col-sm-3"  style="padding-top: 50px; border-right: 1px blue solid; ">
        <img class="img-fluid" src="img/icone_cursos.png">
        <div class="portfolio-caption">
          <p class="font-square"> 1123 </p>
          <p class="font-square"><strong>Cursos</strong></p>
        </div>
      </div>
      <div class="col-sm-3" style="padding-top: 50px; border-right: 1px blue solid;">
        <img class="img-fluid" src="img/icone_alunos.png">
        <div class="portfolio-caption">
          <p class="font-square"> 34534 </p>
          <p class="font-square"><strong>Alunos</strong></p>
        </div>
      </div>
      <div class="col-sm-3" style="padding-top: 65px;">
        <img class="img-fluid" src="img/icone_aulas.png">
        <div class="portfolio-caption">
          <p class="font-square"> 4566 </p>
          <p class="font-square"><strong>Aulas</strong></p>
        </div>
      </div>
    </div>
  </div>
</section>

I am currently seeking guidance on customizing the size and color of the borders. Your help is greatly appreciated!

csstwitter-bootstrap-4

Answer №1

One way to achieve this effect is by using pseudo-elements instead. Here's an example:

.box {
  width   : 300px;
  height  : 100px;  
}

.box::before {
  content : "";
  position: absolute;
  bottom  : 0;
  height  : 1px;
  width   : 50%; 
  border-bottom: 2px dashed blue;
}
<div class="box">Item A</div>
<div class="box">Item B</div>

Answer №2

If you're looking to enhance your design with borders using pseudo elements, here's a simple solution:

Give this a try:

#top-border:before {
    height: 10px;
    display: block;
    width: 100px;
    background: red;
    content: '';
}

#right-border:after {
    display: block; 
    content: '';
    background: blue;
    width: 10px;
    height: 100px;
    margin-top: -120px;
    float: right;
}

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

Ensure that the mask implemented in the form input only shows two decimal places, while simultaneously retaining the original value

Is there a way to format a number in a form input so that it displays only two decimals while still retaining the original value? This is necessary to avoid incorrect values down the line and meets the customer's requirement of showing no more than tw ...

jqueryhtmlcssformsinput

"Unlocking the Power of CSS: How to Effortlessly Align Text and Images

Dealing with an unchangeable piece of HTML can be frustrating, especially when it comes to styling. In my case, I have the following structure: <a title="some title" href="..."> <img src="....jpg"></img> Some text </a> Here ...

htmlcssimagecenterfixed

What is the method for accessing the z-index property of an element in Selenium using Python?

Is it possible to confirm the depth of web elements by checking the "z-index" attribute? Successfully locating an element can be achieved using one of the two statements below. e = WebDriverWait(tA.driver,1).until(EC.visibility_of_element_located((By.XPA ...

pythoncssseleniumz-indexwebdriverwait

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

javascriptiphonecssweb-applications

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeat ...

javascriptcssangularjs

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...

htmlcssimagealignment

How can I force an element to overflow without being affected by its parent's overflow style in CSS/HTML/JS, even if the parent is

I've come across many inquiries on this subject, but the proposed solutions never seem to work when dealing with ancestors that have absolute positioning. Take this example: <div id='page'> <div id='container' style= ...

javascripthtmlcssgoogle-chrome-extensionoverflow

Looking to display several charts on a single page with varying datasets?

I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...

javascripthtmlcsschartschart.js

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

How can I adjust the container to fit the monitor's dimensions while still keeping the

I am currently facing an issue on my website where the main content div has a fixed height, causing it not to scale vertically on larger monitors. I attempted setting the CSS properties for the div to 'auto' in order to allow it to adjust to the ...

csshtmlscrollbarcontainersscale

Is there a way to dynamically update the content of <li> tag with values from an array every x seconds

I am trying to create a li list using jQuery that will update every 2 seconds with new content, similar to game news updates. However, I'm encountering an issue during the first cycle where it skips the second item in the array. The subsequent cycles ...

javascriptjqueryhtmlcss

Is there a way for me to determine if a user has engaged with a form?

I'm surprised by how difficult it was to find information on this topic through Google. Currently, my struggle lies in wanting my form fields to change color based on validity only after the user has interacted with the form. I don't want invali ...

htmlcss

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

Looking for a way to customize the background-color and border of the <tr> element in DataTables 1.9.4? Learn how to enhance the styling of your tables with these

Would it be feasible to emphasize the border of a <tr> and add a background-color to the same <tr> within the table? ...

javascripthtmlcssdatatables

Is it usual for the container to overflow with div content?

Is this common CSS behavior? How can we make the container wrap around the button? http://jsfiddle.net/afrontrow/yepw7oLw/ CSS: .button { background: grey; padding: 10px 20px; } .container { border: 1px solid black; } HTML: <div class= ...

css

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...

javascripthtmlcssreactjsgrid

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example: (i) lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut metus nec urna ...

htmlcsshtml-lists

Troubleshooting: Why isn't my Bootstrap glyphicon icon displaying

Has anyone encountered issues with the glyphicon icon not showing up on buttons in Safari or Chrome when using Bootstrap? I tried fixing it but couldn't. Any help would be greatly appreciated! <link href="css/bootstrap.min.css" rel="stylesheet"&g ...

csstwitter-bootstrapicons

Issue with overflow-auto not displaying scroll bar

In my layout, I have a grid parent with two columns. The left child has a height equal to the parent (100vh), while the right child is 1000px tall, which exceeds the parent's height. Here is the HTML structure: <body> <div class="le ...

htmlcss