<nav class="radikalwp-nav-iconrail"><a class="radikalwp-nav-iconrail-item" href="#" data-tip="خانه">⌂<//a><a class="radikalwp-nav-iconrail-item is-active" href="#" data-tip="پروژه‌ها">▦<//a><a class="radikalwp-nav-iconrail-item" href="#" data-tip="پیام‌ها">✉<//a><a class="radikalwp-nav-iconrail-item" href="#" data-tip="تنظیمات">⚙<//a><//nav>

.radikalwp-nav-iconrail {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #0f172a;
  border-radius: 16px;
}
.radikalwp-nav-iconrail-item {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #94a3b8;
  background: transparent;
  border-radius: 12px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.radikalwp-nav-iconrail-item:hover { color: #fff; background: #1e293b; }
.radikalwp-nav-iconrail-item.is-active {
  color: #a5b4fc;
  background: #312e81;
  box-shadow: inset 3px 0 0 #818cf8;
}
.radikalwp-nav-iconrail-item::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: #1e293b;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.radikalwp-nav-iconrail-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}