Text in Border with transparent text background

Question

How to insert text with transparent background on border ?

i'm unsure this is possible with a transparent background. you could try using `fieldset` and `legend` but i don't think you can position `legend` in html5 — Claire, Jul 29 '19 at 04:54
this solved in https://stackoverflow.com/a/57279326/6569224 for me — Mahdi Bashirpour, Jul 30 '19 at 20:11

score 1 · Answer 1 · edited Jul 29 '19 at 04:58

used :before and :after pseudo classes.

body {
  background-color: red;
}

.border {
  height: 120px;
  width: 400px;
  border: 2px solid black;
  position: relative;
  margin: 40px
}

.border:before {
  content: "My Header title";
  width: 180px;
  /* border: 1px solid; */
  position: absolute;
  text-align: center;
  top: -10px;
  background-color: red;
  left: 50%;
  transform: translateX(-50%);
}

.border:after {
  content: "My Footer title";
  width: 180px;
  /* border: 1px solid; */
  position: absolute;
  text-align: center;
  bottom: -10px;
  background-color: red;
  left: 50%;
  transform: translateX(-50%);
}

<div class="border">

</div>

This will only work with solid background how about when we have pattern in background? — Sumit Patel, Jul 29 '19 at 04:49

score 0 · Answer 2 · answered Jul 29 '19 at 05:25

lets try this below code:

<div class="border">
  <div class="border_box_left"></div>
  <div class="border_box_right"></div>
</div>

<style>
.border {
  height: 120px;
  width: 400px;
  position: relative;
  margin: 40px
}
.border:before {
  content: "My Header title";
  width: 180px;
  position: absolute;
  text-align: center;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border:after {
  content: "My Footer title";
  width: 180px;
  position: absolute;
  text-align: center;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border_box_left {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  left: 0px;
  top: 0px;
  border: 2px solid red;
  border-right: none;
}
.border_box_right {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  right: 0px;
  top: 0px;
  border: 2px solid red;
  border-left: none;
}
</style>

Want to generate dynamic borders then calculate the content width using script and give width to border_box_left and border_box_right.

this solved in https://stackoverflow.com/a/57279326/6569224 for me — Mahdi Bashirpour, Jul 30 '19 at 20:12

Text in Border with transparent text background

2 Answers2