How to add horizontal line with two words on same line as below?

Question

1.00/5 (1 vote)

See more:

How to add horizontal line with two words on same line as below?

I try to add horizontal line with two word under image but it not give me result i need

fiddle that show what i try to do as following :

How to show two words (this is test1-this is test2) with horizontal line on same line

my desired result i need actually do as image below :

I need design only red part under image I(slide-2.png)
my problem on part under image slide-2.png that include two words with horizontal line
and parts under two words as image display

File sharing and storage made simple[^]

What I have tried:

<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
}
.nav {
	display:flex;
	border-top:5px solid #ccc;
	align-items:flex-start;
	flex-wrap:wrap;
}
.nav ul {
	padding: 0;
	margin:5;
	list-style: none;
	display:flex;
	flex:1 0 0;
}
.nav li {
	line-height:1.4;
	flex:1 0 0;
	
}
.nav a {
	display: inline-block;
	padding: 8px 25px;
	color: #000;
	text-decoration:none;
}
.nav a:hover, .nav a.active {
	color: orange;
	border-top:3px solid orange;
	padding-top:5px;
}
.logo {
	margin-left:auto;
	order:2;
}
.logo img {
	display:block;
	margin:auto;
	max-width:300px;
	width:100%;
	height:auto;
}
@media screen and (max-width:800px){
	.logo{order:0;flex:1 0 100%;margin:0;}
}
@media screen and (max-width:499px){
	.nav ul{flex-wrap:wrap;}
	.nav li{flex:1 0 100%;}
	.nav a{display:block;}
}
.bg
{
  width: 100%;
  height:20%;
  padding-right: 2px;
  
}
h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 span {
  background: #fff;
  margin: 0 15px;
}
h2:before,
h2:after {
  background: black;
  height: 2px;
  flex: 1;
  content: '';
}
h2.left:after {
  background: none;
}
h2.right:before {
  background: none;
}
</style>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alsafwa</title>

</head>

<body>

<nav class="nav">
  <div class="logo"><img  src="alsafwa-logo.png" alt ="logo" width="300px" height="200px"> </div>
  <ul>
    <li><a class="active" href = "#">الرئيسيه </a> </li>
    <li><a href = "#">من نحن </a> </li>
    <li><a href ="#"> خدماتنا </a> </li>
    <li><a href ="#"> اعمالنا </a> </li>
    <li><a href ="#"> اخر الاخبار </a> </li>
    <li><a href ="#"> اتصل بنا </a> </li>
  </ul>
</nav>
<nav class="nav">
<div class="bg"><img  src="slide-2.png" alt ="Advlogo" > </div>
</nav>
<table>
<tr>
<td>
<h2 class="left"><span>THIS IS A TEST1</span></h2>
</td>
<td>
<h2 class="left"><span>THIS IS A TEST2</span></h2>
</td>
</tr>
</table>
<p>
نحن احدى وكالات الدعاية والاعلان ذات سمة خاصة فنحن نتناول كل اعمالنا على انها لوحات فنية مقتناه للمساهمة فى رفع الذوق العام فى مجال الدعاية والاعلان.
نستطيع ان نقدم لعملائنا المزيد و المزيد من الابتكارات بإسلوب عصرى مبتكر ذو سمة فنية راقية.
لدينا فريق متكامل من الفنيين لتصنيع جميع انواع اللافتات وجميع الخامات تصنع فى ورشتنا الخاصة.
</p>
<ul>
<li>

خبره 20 عاما في مجال الدعاية والإعلان واعمال الديكور.
</li>
<li>
  فريق متكامل من الفنيين المحترفين لتلبيه مختلف الاحتياجات.
</li>
<li>
  جميع الخامات يتم تصنيعها داخل ورشنا وتحت اشراف المتخصصين.
</li>
</ul>

</body>
</html>

Posted 23-Jul-19 5:02am

ahmed_sa

Updated 24-Jul-19 5:07am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12656556 · Answer 1 · 2019-07-24T05:08:00

Instead of table i had simplify the table into div

<table>
<tr>
<td>
<h2 class="left"><span>THIS IS A TEST1</span></h2>
</td>
<td>
<h2 class="left"><span>THIS IS A TEST2</span></h2>
</td>
</tr>
</table>

to

<div class="border-line">
  <span>THIS IS A TEST1</span>
  <span>THIS IS A TEST2</span>
</div>

and also i added some of styles

.border-line span{
    font-size:1.5em;
    font-weight:bold;
}

.border-line{
  border-bottom:1px solid #000;
}

Here i removed h2 tag so its better to remove the h2 related unwanted style.Here i add the group the span in one div and i add the border-bottom for div.