How to add an arrow at the end of the lines - html

Question

I actually have some styles that allow me to display a text surrounded by lines. The text can be displayed horizontally or vertically. I would like to add an arrow a the end of the surrounding lines. Something like this:
------------------------- My horizontal label ------------------------>
or
^
|
|
M
y
t
e
x
t
|
|
My vertical text is displayed differently in my following example.
I tried several Technics i found in the net but no way to make it work in horizontal and vertical context.
Someone has an idea of how it can be implemented?
This is my starting css in which i would like to add these arrows:
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
h1:before {
margin-right: 10px
}
h1:after {
margin-left: 10px
}
h2 {
display: flex;
flex-direction: row;
writing-mode: vertical-rl;
transform: scale(-1);
text-align: -webkit-center;
height: 100%;
}
h2:before, h2:after{
content: "";
flex: 1 1;
border-right: 1px solid;
margin: auto;
}
h2:before {
margin-bottom: 10px
}
h2:after {
margin-top: 10px
}
<h1>My horizontal text</h1>
<h2>My vertical text</h2>

Answer 1

Thank you for your solution. I tried this that seems to be nice too:
.line-container {
display: flex;
width: 100%;
margin: 20px auto;
align-items: center;
}
.line {
flex-grow: 1;
height: 2px;
background: black;
position: relative;
}
.line.arrow-right:after {
position: absolute;
content: '';
bottom: -4px;
right: -1px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid black;
}
.line-container span.label {
margin: 0 10px;
}
.line-container-vertical {
display: flex;
height: 100%;
margin: auto 20px;
align-items: center;
writing-mode: vertical-rl;
transform: scale(-1);
}
.line-vertical {
flex-grow: 1;
width: 2px;
background: black;
position: relative;
}
.line-vertical.arrow-top:after {
position: absolute;
content: '';
bottom: -2px;
left: -4px;
width: 0;
height: 0;
border-top: 10px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.line-container-vertical span.label {
margin: 10px 0;
}
<div class="line-container">
<span class="line arrow-left"></span>
<span class="label">Horizontal Label</span>
<span class="line arrow-right"></span>
</div>
<div class="line-container-vertical">
<span class="line-vertical"></span>
<span class="label">Vertical Label</span>
<span class="line-vertical arrow-top"></span>
</div>
What do you think?

Answer 2

[EDIT 20221125 - Added an alternative approach]
I am not all sure that your approach is the best, but based on your approach, the following might be of use:
h1 {
display: flex;
flex-direction: row;
}
h1 > div:nth-of-type(1) {
margin-right: -0.05em;
}
h1 > div:nth-of-type(2),
h1 > div:nth-of-type(4) {
flex: 1 1;
border-bottom: 0.05em solid;
margin: auto;
padding-top: 0.17em;
}
h1 > div:nth-of-type(3) {
margin-right: 10px;
margin-left: 10px;
}
h1 > div:nth-of-type(5) {
margin-left: -0.05em;
}
h2 {
display: flex;
flex-direction: row;
writing-mode: vertical-rl;
transform: scale(-1);
height: 100%;
}
h2 > div:nth-of-type(1) {
margin-bottom: -0.05em;
}
h2 > div:nth-of-type(2),
h2 > div:nth-of-type(4) {
flex: 1 1;
border-left: 0.05em solid;
margin: auto;
padding-left: 0.17em;
margin-top: -0.05em;
margin-bottom: -0.05em;
}
h2 > div:nth-of-type(3) {
margin-top: 10px;
margin-bottom: 10px;
}
h2 > div:nth-of-type(5) {
margin-bottom: -0.05em;
}
<h1><div>←</div><div></div><div>My horizontal text</div><div></div><div>→</div></h1>
<h2><div>←</div><div></div><div>My vertical text</div><div></div><div>→</div></h2>
The following is an alternative approach and should be more robust:
.horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
background-repeat: repeat-x;
background-position-y: center;
background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 20 3"><line x1="0" y1="1" x2="20" y2="1" stroke="black" stroke-width="3" /></svg>');
background-size: 100% 0.2em;
}
.horizontal > span {
background: white;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
leftarrow {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.1em" viewBox="0 0 40 14"><line x1="0" y1="7" x2="38" y2="2" stroke="black" stroke-width="2" /><line x1="0" y1="7" x2="38" y2="12" stroke="black" stroke-width="2" /></svg>');
}
rightarrow {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.1em" viewBox="0 0 40 14"><line x1="1" y1="2" x2="39" y2="7" stroke="black" stroke-width="2" /><line x1="1" y1="12" x2="39" y2="7" stroke="black" stroke-width="2" /></svg>');
}
<div class="horizontal"><leftarrow></leftarrow><span>Horizontally aligned text</span><rightarrow></rightarrow></div>