How to add border to header title?

Two code examples that will help you to add border to a h1 title in HTML
26 October 2017   1642

In order to add a border to a header title, you can a pseudo element positioned over the border-bottom:

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;

h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid orange;
  width: 25%;
  position: relative;
  bottom: -6px; /* your padding + border-width */

Also, you can use a gradient and background-size

h1 {
  background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
  background-size:100% 3px;/* here set thickness */

Frontend News Digest 7 - 13.03

Build a desktop GIF Searcher App with NodeGui, learn why height and width on image is important, Firefox 74 released and more
13 March 2020   452

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn about the performance benefits of variable fonts, 7 types of native errors in JS, Bootstrat tree view 4 update and more awaits for you in our newest digest.


  • Build a Native Desktop GIF Searcher App Using NodeGui

This tutorial will teach you how to install NodeGui (a Qt-driven desktop app library) and use it to build a “meme searcher.”


  • The performance benefits of Variable Fonts

This post will show you the performance gains you can get when using variable fonts

  • Setting Height And Width On Images Is Important Again

Did you knew that thanks to some recent changes in browsers, it’s now worth setting width and height attributes on your images to prevent layout issues

  • What's New in Mongoose 5.9: SchemaType Default Options and Better Populate Limit

Overview of new features of the newest version of MongoDB object modeling tool 

  • Firefox 74 Released

Learn what changes (and challenges) developers will meet when working with the new version of one of the most popular web browsers

  • 7 Types of Native Errors in JavaScript You Should Know

Great article for the newbies - check the most popular errors in JS programming and how to avoid them


  • OpenSilver

Open-source reimplementation of Silverlight that runs on current browsers via WebAssembly

  • Bootstrap 4 Tree View

Plugin to build a Treeview with boostrap 4

  • ls-lint

Developers claim it's an "extremely fast" file and directory name linter

  • Node 13.11.0

The newest version of JavaScript runtime environment