如何使用html、css和javascript在图标和文本的两侧添加线条？

<div class="icon-text-wrapper">
  <i class="icon"></i>
  <span class="text">文本内容</span>
</div>

.icon-text-wrapper {
  position: relative;
  display: inline-block;
}

.icon {
  display: inline-block;
  width: 20px; /* 设置图标的宽度 */
  height: 20px; /* 设置图标的高度 */
  background-color: #000; /* 设置图标的背景颜色 */
}

.text {
  display: inline-block;
  margin-left: 10px; /* 设置图标和文本之间的间距 */
}

.icon-text-wrapper::before,
.icon-text-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50%; /* 设置线条的长度 */
  height: 1px; /* 设置线条的粗细 */
  background-color: #000; /* 设置线条的颜色 */
}

.icon-text-wrapper::before {
  left: 0;
}

.icon-text-wrapper::after {
  right: 0;
}

var iconTextWrapper = document.querySelector('.icon-text-wrapper');

iconTextWrapper.addEventListener('mouseover', function() {
  iconTextWrapper.classList.add('hovered');
});

iconTextWrapper.addEventListener('mouseout', function() {
  iconTextWrapper.classList.remove('hovered');
});