Title with horizontal line css

Joomla

#sp-right .sp-module-title {
    display: inline-block;
    position: relative;
    margin-top: 0;
    margin-bottom: 20px;
}
#sp-right .sp-module-title:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    background: #00b3e3;
    left: calc(100% + 10px);
    top: calc(50% - 1px);
}

WordPress

Style 01

.widget .widget-title {
	display: inline-block;
	position: relative;
	margin-top: 0;
	margin-bottom: 20px;
}
.widget .widget-title:after {
	content: "";
	position: absolute;
	width: 40px;
	height: 2px;
	background: #00b3e3;
	left: calc(100% + 10px);
	top: calc(50% - 1px);
}

Style 02

.widget .widget-title {
	 overflow: hidden;
	 text-align: center;
}
.widget .widget-title:before,
.widget .widget-title:after {
	 background-color: #333;
	 content: "";
	 display: inline-block;
	 height: 1px;
	 position: relative;
	 vertical-align: middle;
	 width: 50%;
}
.widget .widget-title:before {
	 right: 0.5em;
	 margin-left: -50%;
}
.widget .widget-title:after {
	 left: 0.5em;
	 margin-right: -50%;
}
Copyright © 2025 Siam Naulak.
magnifiercrossmenu