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

要在图标和文本的两侧添加线条，可以使用HTML、CSS和JavaScript来实现。下面是一种实现的方法：

HTML结构：在HTML中，使用适当的标签来包裹图标和文本。例如，可以使用<div>元素来包裹它们。

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

CSS样式：使用CSS来设置图标和文本的样式，并添加线条。可以使用伪元素::before和::after来创建线条。

.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;
}

JavaScript交互（可选）：如果需要在交互时添加或移除线条，可以使用JavaScript来实现。例如，可以使用事件监听器来监听鼠标悬停事件，并在悬停时添加线条。

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

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

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

通过以上步骤，就可以在图标和文本的两侧添加线条。可以根据实际需求调整样式和交互效果。

注意：以上代码只是一种实现方式，具体的实现方法可能因项目需求和设计风格而有所不同。