Add text in the middle of the border (the border line crosses the text on both sides of the text) vue elementui

Add text in the middle of the border

(A border line runs across the text on both sides)

Method: define a length and width for the text area, then make its background white, and then move the text to the corresponding position

The specific effect is as follows:

 

code show as below:

<template>
  <div class="border">
    <div class="border-title">
      <span>我的消息：</span>
      <span>10</span>
    </div>
  </div>
</template>
<style scoped lang="less">
.border {
  width: 700px;
  height: 200px;
  margin-top: 30px;
  margin-left: 20px;
  border: 2px solid black;
  border-radius: 4px;
}
.border-title {
  width: 110px;
  height: 30px;
  background: white;
  text-align: center;
  margin-top: -12px;
  margin-left: 10px;
}
</style>